CODEWITHSUNDEEP
jqueryhtmlonclick
Akash Desai
Akash Desai

Reputation: 602

How to disable icons using jQuery?

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');
    });
});

Upvotes: 1

Views: 5557

Answers (1)

Adarsh Mohan
Adarsh Mohan

Reputation: 1384

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>

Upvotes: 1

Related Questions