jQuery - 如何对选定元素执行“每个”功能？

Question

我想禁用屏幕上的所有按钮。

我试过了：

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

它不起作用，我认为我没有正确使用“this”这个词。

编辑：按钮位于表格单元格中

我尝试过类似的方法，但它不起作用：

$("#gameboard-table tbody tr td button").attr("disabled", true);

Answer 1

用于<button> 标签

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

对于<input type="button">标签

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

FOR JQuery 1.6+ 将 attr 更改为 prop

或者简单地用普通的javascript编写禁用行

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

更新：

如果您想禁用动态创建的按钮，请确保在按钮创建后运行代码，而不是在页面加载之前/页面加载时运行。

如果您使用的是 Ajax，则需要在使用按钮更新表格后禁用 ajax 成功功能上的按钮。

以下是您需要做的示例：

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

Answer 2

无需使用each()。简直可以用

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

或

$(":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>

Answer 3

请尝试以下代码

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

据我检查，它甚至在桌子内也能正常工作，

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

已编辑：

请尝试下面的小提琴和代码

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

这就是为什么动态生成的 div 点击不起作用：

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

Click event doesn't work on dynamically generated elements