Disable button after click in JQuery

Question

My button uses AJAX to add information to the database and change the button text. However, I wish to have the button disabled after one click (or else the person can spam the information in the dataabase). How do I do this?

HTML

<button class="btn btn-lg btn-primary" id='roommate_but' onclick='load(<?php echo $user_id;?>)'><span class="glyphicon glyphicon-plus"></span> Add Person</button>

Javascript / AJAX / JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

function load(recieving_id){                                    
    if (window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    } else{
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){  
            document.getElementById("roommate_but").innerHTML =  xmlhttp.responseText;


        }

    }

xmlhttp.open('GET','include.inc.php?i=' + recieving_id, true);

xmlhttp.send();


}

Do you actually have jQuery included on the page? I am asking because - although you tagged this question with jQuery - there is no jQuery being used in your code. So the answers could vary strongly depending whether you can use jQuery or not. — Steve
– Steve, Commented May 11, 2014 at 21:08
Yes, I am using JQuery. I edited my original post to show the link to JQuery. Any suggestions to disable the button after one click? — user3377126
– user3377126, Commented May 11, 2014 at 21:11
Please do not use plain XHR if you are already using jQuery. It's extremely ugly to mix both. — ThiefMaster
– ThiefMaster, Commented May 11, 2014 at 21:27

Manoj Yadav · Accepted Answer · 2014-05-11 22:02:37Z

48

*Updated

jQuery version would be something like below:

function load(recieving_id){
    $('#roommate_but').prop('disabled', true);
    $.get('include.inc.php?i=' + recieving_id, function(data) {
        $("#roommate_but").html(data);
    });
}

edited May 11, 2014 at 22:02

answered May 11, 2014 at 21:11

Manoj Yadav

6,6121 gold badge25 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3377126 Over a year ago

When I added it in the load function, the button is still clickable and it stopped its function to add things to the database and change the button's text. Any particular placement for that code to make sure it works with the buttons other features?

Manoj Yadav Over a year ago

After ajax success remove disabled, answer updated

user3377126 Over a year ago

I replaced the entire load function with your load function (therefore replacing AJAX for Jquery) and it still doesn't disable the button after one click (still clickable). However, it still is able to do the same thing that AJAX did, go to another page, add something to db, and change button text. If it helps, I am using a bootstrap button. Any thing I can still do?

Manoj Yadav Over a year ago

If you want to disable the button after one click then remove $('#roommate_but').prop('disabled', false);, answer updated

Andrew Over a year ago

You would get a lot more thumbs up if you make this answer more generic for the title of the question: "Disable button after click in JQuery" which shows up as top result in google. Include info on disabling directly int he answer for example/.

kplates · Accepted Answer · 2014-05-11 21:36:37Z

39

You can do this in jquery by setting the attribute disabled to 'disabled'.

$(this).prop('disabled', true);

I have made a simple example http://jsfiddle.net/4gnXL/2/

edited May 11, 2014 at 21:36

answered May 11, 2014 at 21:10

kplates

7301 gold badge7 silver badges17 bronze badges

2 Comments

DiDebru Over a year ago

And how you disable a button and keep its styles because the attr "disabled" has often an opacity css rule on it.

kplates Over a year ago

Have a look here. You'll need to overwrite the disabled pseudo class developer.mozilla.org/en-US/docs/Web/CSS/:disabled

HappyHands31 · Accepted Answer · 2020-12-14 02:32:02Z

0

Consider also .attr()

$("#roommate_but").attr("disabled", true); worked for me.

answered Dec 14, 2020 at 2:32

HappyHands31

4,15119 gold badges69 silver badges117 bronze badges

Comments

Tyler2P · Accepted Answer · 2022-06-02 16:05:00Z

-1

This code is used to accept / decline particular course which a student got as part of allotment in the college.

<script>
    $(document).on('click', '.decline', function() {
     var courseid = $(this).attr('data-id');
     $('#accept_'+courseid).prop('disabled', true);
    });

    $(document).on('click', '.accept', function() {
      var courseid = $(this).attr('data-id');
      $('#decline_'+courseid).prop('disabled', true);
    });
    function accept_decline_action(regno,coursecode,coursename,btnval){

      var url = '<?php echo site_url('home/accept_decline_status') ?>';
      $.ajax({
        url: url,
        type: 'POST',
        data: {
          regno: regno,
          coursecode: coursecode,
          coursename: coursename,
          btnval: btnval
        },
        success: function(data) {
          if (btnval == 1) {
            alert("You have accepted the course : "+coursename);
          } else {
            alert("You have declined the course : "+coursename);
          }
        }
      })
    }
</script>

<td role="cell" style="text-align: center;">
  <div>
    <button type="button" data-id = "<?= $mk['coursecode'] ?>" value = 1 
            id = "accept_<?=$mk['coursecode'] ?>" name = "accept" 
            class="btn btn-success accept"                                                             onclick="accept_decline_action('<?= $regno ?>','<?= $mk['coursecode'] ?>');"
            title="Accept" style="border-color:#4CAF50;background-color:                               #4CAF50;">&#10004
    </button>
  </div>
  <div>
    <button type="button" class="btn btn-danger decline" value=0
          data-id="<?= $mk['coursecode'] ?>" id="decline_<?= $mk['coursecode'] ?>"
          name="decline"
          onclick="accept_decline_action('<?= $regno ?>','<?= 
          $mk['coursecode'] ?>');"
          title="Decline" style="background-color:#DC143C; border-color:#DC143C">&#10008
        </button>
      </div>
    </td>

edited Jun 2, 2022 at 16:05

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jun 1, 2022 at 4:33

fathimafasna

12 bronze badges

3 Comments

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Tyler2P Over a year ago

Your answer could be improved by adding more information on what the code does and how it helps the OP.

fathimafasna Over a year ago

@Tyler2P Is it clear now?

Collectives™ on Stack Overflow

Disable button after click in JQuery

4 Answers 4

5 Comments

2 Comments

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

3 Comments

Related