1

I want to disable all the buttons on the screen.

I've tried this:

$(":button").each(function () {
    $(this).attr("disabled", true);
});

It's not working, I think I'm not using the word "this" the right way.

Edit: the buttons are in table cells

I've tried something like this, but it's not working:

$("#gameboard-table tbody tr td button").attr("disabled", true);
Keavon
  • 6,837
  • 9
  • 51
  • 79
user3364652
  • 480
  • 8
  • 23

3 Answers3

0

for <button> tags

$("button").attr("disabled", true);

for <input type="button"> tags

$("input[type=button]").attr("disabled", true);

FOR JQuery 1.6+ change attr to prop

or simply write the disabling line in plain javascript

$("button, input[type=button]").each(function () {
    this.disabled=true;
});

UPDATE:

if you want to disable buttons which are created dynamically, make sure you run the code after the buttons are created, and not before/on page load.

if you are using Ajax, you will need to disable the buttons on the ajax success function, after you update the table with the buttons.

Below is an example of what you need to do:

var options = {
    type: "POST",
    //...
    //more ajax vars 
    //...
    success: function (response) {

        //...
        //update your table with the buttons,
        //...

        //disable buttons using one of the methods from above:
        $("button, input[type=button]").each(function () {
            this.disabled=true;
        });
    }
};
$.ajax(options);
Banana
  • 7,424
  • 3
  • 22
  • 43
  • if the dynamic elements are created inside the ajax's success function, then yes, it will work. as long as the code is being run *after* the creation of the dynamic elements, it will work – Banana Sep 27 '14 at 15:00
0

No need to use each(). Simply can use

$(":button").attr("disabled", "disabled");

or

$(":button").attr("disabled", true);


<button>x</button>
<button>y</button>
<button>x</button>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
    $(":button").attr("disabled", "disabled");
    //$("button").attr("disabled", true);
</script>
MH2K9
  • 11,951
  • 7
  • 32
  • 49
  • Thanks! It's working on buttons that are not inside a container. I forgot to mention the buttons are in a table. I've edited my post. – user3364652 Sep 27 '14 at 14:10
0

Please try below code 

//for <button> tags --> pls uncomment below line 
      $(":button").attr("disabled", "disabled");



    //Even your code works !!!! ---> uncomment below lines to see

    $(":button").each(function () {
       //$(this).attr("disabled", true);
    });

as far as I checked it is working even inside table,

Here is my jsfiddle link : http://jsfiddle.net/hiteshbhilai2010/9tzhabzw/16/

EDITED :

please try below fiddle and code

JSFIDDLE : http://jsfiddle.net/hiteshbhilai2010/9tzhabzw/32/

//for <button> tags --> pls uncomment below line 
 // $(":button").attr("disabled", "disabled");


$(":button").click(function(){
//alert(this.id);
})

$(".btn1").click(function(){
$("#mytable").append("<tr><td>"+'<button class = "btn" >new button</buttton>'+"</td></tr>");
})

//Even your code works !!!! ---> uncomment below lines to see


jQuery('body').on("click", "#click5", function() {
      $(".btn").each(function () {
       $(this).attr("disabled", true);
    });
})

jQuery('body').on("click", "#click6", function() {
      $(".btn").each(function () {
       $(this).attr("disabled", false);
    });
})

Here is why dynamic generated div click does not work :

In jQuery, how to attach events to dynamic html elements?

Click event doesn't work on dynamically generated elements

Community
  • 1
  • 1
Hitesh
  • 4,098
  • 11
  • 44
  • 82
  • let me know if my jsfiddle link helps you to understand your problem – Hitesh Sep 27 '14 at 14:25
  • Thank you. It's working, but not on my table. My table is created dynamically but I run this code only after it created. Can the fact that the table created dynamically be the problem? – user3364652 Sep 27 '14 at 14:32
  • hmmm ok let me try it dynamically than – Hitesh Sep 27 '14 at 14:34
  • I've tried it, it's working only when I started to use the page, but not on the $(document).ready function, have any idea why? this function is executed only after the table is loaded. – user3364652 Sep 27 '14 at 14:42
  • it depends on how you load the buttons. do you load them using Ajax? what do you mean by "dynamically" ? – Banana Sep 27 '14 at 14:44
  • Yes I'm using Ajax to get info I put on the buttons and then create the table. – user3364652 Sep 27 '14 at 14:46
  • 1
    then it will never work on document ready. you need to disable the buttons on the Ajax success function. i will update my answer with an example – Banana Sep 27 '14 at 14:47