jQuery - 如何执行每个'选定元素的功能?

时间:2014-09-27 13:45:18

标签: jquery jquery-selectors each

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

我试过这个:

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

它没有用,我想我没有用正确的方式使用“this”这个词。

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

我尝试过类似的东西,但它不起作用:

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

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

无需使用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>

答案 2 :(得分:0)

请尝试以下代码

//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 linkhttp://jsfiddle.net/hiteshbhilai2010/9tzhabzw/16/

已编辑:

请尝试以下小提琴和代码

JSFIDDLEhttp://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