How to disable icons using jQuery?

Question

I'm new to JQuery. I wanted to disable buttons when I click on a button. I tried this method but it is not working. Thanks.

html

<a href="vote.php?qid=<?php echo $qid ?>&val=1" class="like">
  <i class="material-icons black-text ">thumb_up</i></a>

 <a href="vote.php?qid=<?php echo $qid ?>&val=2" class="dislike">
  <i class="material-icons black-text ">thumb_down</i></a>

<a href="vote.php?qid=<?php echo $qid ?>&val=3" class="report">
  <i class="material-icons black-text" >report</i></a>

jquery

$(document).ready(function() {
    $('.like').on('click' function() {
        $('.dislike').prop('disabled',true);
        $('.report').attr('disabled','disabled');
    });
});

I want to disable thumb_down & report icons when I click on thumb_up. — Akash Desai, Mar 23 '18 at 21:56
Do you want to hide the icon or prevent buttons from receiving clicks anymore? — SystemGlitch, Mar 23 '18 at 21:57
@AkashDesai : try using the $(..).prop() on both the buttons — Adarsh Mohan, Mar 23 '18 at 21:58
I think jquery's disabled tag hides the icon, but even 2nd option can work for me. — Akash Desai, Mar 23 '18 at 22:00
disabled wont work on a tags.. try replacing the href attribute — Adarsh Mohan, Mar 23 '18 at 22:03
@AdarshMohan I tried to print message after onclick it did not display in the console. So my onclick is not working. — Akash Desai, Mar 23 '18 at 22:03
there should be `, (comma)` after the `click` like `$('.like').on('click', function () {` — Adarsh Mohan, Mar 23 '18 at 22:14
Possible duplicate of [jQuery disable a link](https://stackoverflow.com/questions/970388/jquery-disable-a-link) — Heretic Monkey, Mar 23 '18 at 22:24
@AdarshMohan I added the comma & replaced with button. It worked. Thanks everyone. — Akash Desai, Mar 23 '18 at 22:27

score 1 · Accepted Answer · answered Mar 23 '18 at 22:08

Here is a trick to work on a tags to have disabled. Add a class disabled to the a tag and check the on click functions. just return false in case if you don't want to allow clicks when the clicked a tag has a disabled class. Its preferred to call the e.preventDefault(); instead of returning false.

$(document).ready(function () {
  $('.like').on('click', function (e) {
    var parent = $(this).parent();
    parent.find('.dislike').addClass('disabled');
    parent.find('.report').addClass('disabled');
  });
  $('.dislike, .report').on('click', function (e) {
    if ($(this).hasClass('disabled')) return alert('no click allowed'), e.preventDefault(),false;
    else alert('clicked');
  });
})

.disabled {
  color: #666;
  cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <a href="#" class="like">Like</a>
  <a href="#" class="dislike">Dislike</a>
  <a href="#" class="report">Report</a>
</div>

How to disable icons using jQuery?

1 Answers1