Andrés Girón Andrés Girón - 1 month ago 9
HTML Question

permanently enable a button and change its image src with jQuery and LocalStorage

I have a

disabled
button that I want to enable by clicking another button and keep it permanently enabled. That button has an image and at the same time as the button gets enabled the image
src
should change. This is my code:

<!--This is the button that enables the img_tema2 button-->
<a id="a_tema1" href="principal.html" class="btn btn-success">Enviar</a>

<!--This is the img_tema2 button-->
<div class="col-lg-4">
<button class="tsbutton" onclick="window.location='tema_2.html';" id="img_tema2">
Tema 2
<img id="gif_tema2" class="img-circle2" src="../assets/img/segundo_tema_gris.gif" alt="Generic placeholder image" width="140" height="140">
</button>
</div>


$("#img_tema2").prop("disabled", true);

$(function () {
var showLittleHeader = localStorage.getItem('#img_tema2');

if (showLittleHeader) {
$("#img_tema2").prop("disabled", false);
}

$('#a_tema1').on('click', function () {
localStorage.setItem('#img_tema2', 1);
$("#img_tema2").prop("disabled", false);
});
});


Sorry, I totally forgot to explain a lot of things.

The
a_tema1
its on a different HTML.
When I open my html the button
img_tema2
is not disabled, and as I said up, I need it to be first disabled and when I click the
a_tema1
, it gets enabled.
Adding the line
$("#img_tema2 img").attr("src", '');
that was recommended, it doesn´t do anything neither.
What could I be doing wrong?

Sorry for my bad english an thanks for all the help you can give me

Answer

Not sure exactly what you are trying to do, but this is my interpretation:

https://jsfiddle.net/tzf8c50k/

HTML:

<!--This is the button that enables the img_tema2 button-->
<div id="a_tema1" class="btn btn-success">Enviar</div>
<br/><br/>
<!--This is the img_tema2 button-->
<div class="col-lg-4">
  <button class="btn" onclick="window.location='tema_2.html';" id="img_tema2">
    Tema 2
    <img id="gif_tema2" class="img-circle2" src="https://i.imgur.com/fBE8b1k.png" alt="Generic placeholder image" width="140" height="140">
  </button>
</div>

<br/><br/><br/><br/>
<p>Icons made by <a href="http://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0"
  target="_blank">CC 3.0 BY</a></p>

JS:

$("#img_tema2").attr("disabled", "disabled");

$(function() {
    var showLittleHeader = localStorage.getItem('#img_tema2');
    if (showLittleHeader) {
      $("#img_tema2").removeAttr("disabled");
      $("#gif_tema2").attr("src", "http://i.imgur.com/fNerL36.png");
    }

  $('#a_tema1').on('click', function() {
    localStorage.setItem("#img_tema2", 1);
    $("#gif_tema2").attr("src", "http://i.imgur.com/fNerL36.png");
    $("#img_tema2").removeAttr("disabled");
  });
});