javascript、jquery、asp.net、gridviewなど、異なるIDを持つ複数のチェックボックスのチェックボックスの数に基づいて有効/無効を切り替えるボタン

私はこのようなテーブルのチェックボックスのリストをボタンと共に持っている：

<table id="mytable">
<tr><th>checked</th><th>id</th><th>text</th></tr>
<tr><td><input id="cb1" type="checkbox" name="checker1"/></td><td>123</td><td>abc</td></tr>
<tr><td><input id="cb2" type="checkbox" name="checker2"/></td><td>456</td><td>def</td></tr>
<tr><td><input id="cb3" type="checkbox" name="checker3"/></td><td>789</td><td>ghi</td></tr>
<tr><td><input id="cb4" type="checkbox" name="checker4"/></td><td>454</td><td>ghi</td></tr>
<tr><td><input id="cb5" type="checkbox" name="checker5"/></td><td>565</td><td>ghi</td></tr>
</table>

<input type="button" name="myjqbutton" value="My Jquery Button" id="jqb" disabled="true"/>

私がしたいのは、1つ以上のチェックボックスがチェックされている場合にのみボタンを有効にすることです。

最初の考えでは、テーブルにチェックインされているチェックボックスの数をカウントする必要があるということです。これらを変数に数えるために.eachを使って行うことができます。

var mytable= document.getElementById("mytable");
$("input:checkbox:checked", mytable).each(function() {
// whatever here
});

ただし、count> 0であるかどうかに応じて、各チェックボックスはカウントを調べ、ボタンを有効または無効にするために変更されたイベントを必要とします。

または、私が探しているこの機能を実現する簡単な方法があります。

回答：

あなたはできる

$("#mytable input:checkbox").change(function(){
$("#jqb").prop("disabled", $("#mytable input:checkbox:checked").length ===0);
});

それはあなたが望むことをするかもしれません：

$("#mytable input[type=checkbox]").click(function(){
if($("#mytable input[type=checkbox]:selected").size()) > 0) $("#jqb").attr("disabled", "disabled");
else $(".someElement").removeAttr("disabled");

if ($("#mytable :checkbox:checked").length) {
$("#jqb").prop("disabled", false); // Assumes disabled by default
}

これを試してみてください。

 $("#jqb").prop("disabled", $("#mytable input:checkbox:checked"]").length === 0);

change イベントは必須ですが、jQueryは複雑なセレクタを提供して、チェックされたものの数を減らします。

$(":checkbox").change(function(e) {
// for a performance considerationg, to reduce selector lookup,
// once a checkbox is checked itself, there must be one or more checkbox checked
// then the selector finds checked checkbox whose id attribute starts with "cb"
if (this.checked || $(":checkbox[id^="cb"]:checked).length >= 1) {
// do stuff
}
});