Hide method works, but doesn't turn off in jQuery

Question

I use an attribute <a>that works on hide(), but not disable. Can anyone tell me why.

Fiddle

$("#1").click(function() {
  if (!$(".id_" + event.target.id).hasClass('minus-symbol')) {
    alert('data')
    var id = event.target.id
    $(".id_" + event.target.id).removeClass('plus-symbol').addClass('minus-symbol')
      //$(".id_"+event.target.id).hide(); // hide is working
    $(".id_" + id).attr('disabled', true); // disable is not working  
  } else {
    alert('data1')
    $(".id_" + event.target.id).addClass('plus-symbol').removeClass('minus-symbol')
  }
});

.plus-symbol {
  background-image: url('../plus-sym.gif');
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 7px;
}
.minus-symbol {
  background-image: url('../minus-symbol.gif');
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 7px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='plus-symbol id_1' id="1">data</a>

Run codeHide result

What is a solution without changing the attribute <a>.

Answer 1

Like the guys mentioned in the comment, the property disabledonly works with form elements. You can disable clicks using a global boolean variable, for example clickable, and you can control the click on it:

var clickable=true;

$("#disable-click").click(function(){
    clickable=false;
});

$("#enable-click").click(function(){
    clickable=true;
});

$("#1").click(function(){

   if (clickable){
       if(!$(".id_"+event.target.id).hasClass('minus-symbol')){
          alert('data')
          var id = event.target.id
          $(".id_"+event.target.id).removeClass('plus-symbol').addClass('minus-symbol')
          //$(".id_"+event.target.id).hide(); // hide is working
       }else{
          alert('data1')
          $(".id_"+event.target.id).addClass('plus-symbol').removeClass('minus-symbol')
       }
   }
});

.plus-symbol {
  background-image: url('../plus-sym.gif');
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 7px;
}
.minus-symbol {
  background-image: url('../minus-symbol.gif');
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 7px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='plus-symbol id_1' id="1">data</a><br><br>
<button type="button" id='disable-click'>Disable Click</a>
<button type="button" id='enable-click'>Enable Click</a>

Run codeHide result

Answer 2

disabled JavaScript. - . - id <a>, JS. - :

removeAttr("id")

.

,

$("#1").click(function(){
   if(!$(this).hasClass('minus-symbol')){
      alert('data');
      $(this).removeClass('plus-symbol').addClass('minus-symbol').attr('disabled','true').hide();
   }else{
      alert('data1');
      $(this).addClass('plus-symbol').removeClass('minus-symbol');
   }
});