当有5个选中的复选框时,我试图禁用所有未选中的复选框.
我的代码在这里不起作用:http://jsfiddle.net/mtYtW/18/
我的Jquery:
var countchecked = $('table input[type="checkBox"]').find(":checked").length if(countcheckhed > 5) { $("table input:checkBox").attr("disabled",true); } else {}
我的HTML:
<table cellspacing="0" cellpadding="0" width="770px;"> <tbody><tr style="border: 1px solid green; height: 40px; font-size: 14px;"> <th>Feature 1</th> <th>Feature 2</th> <th>Feuture 3</th> </tr> <tr> <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkBox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> <td>Test 4</td> <td>Test 5</td> <td>Test 6</td> </tr> <tr> <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkBox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> <td>Test 4</td> <td>Test 5</td> <td>Test 6</td> </tr> <tr> <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkBox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> <td>Test 4</td> <td>Test 5</td> <td>Test 6</td> </tr> <tr> <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkBox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> <td>Test 4</td> <td>Test 5</td> <td>Test 6</td> </tr> <tr> <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkBox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> <td>Test 4</td> <td>Test 5</td> <td>Test 6</td> </tr> <tr> <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkBox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> <td>Test 4</td> <td>Test 5</td> <td>Test 6</td> </tr> <tr> <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkBox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> <td>Test 4</td> <td>Test 5</td> <td>Test 6</td> </tr> <tr> <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkBox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> <td>Test 4</td> <td>Test 5</td> <td>Test 6</td> </tr> <tr> <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkBox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> <td>Test 4</td> <td>Test 5</td> <td>Test 6</td> </tr> <tr> <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkBox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> <td>Test 4</td> <td>Test 5</td> <td>Test 6</td> </tr> <tr> <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkBox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> <td>Test 4</td> <td>Test 5</td> <td>Test 6</td> </tr> </tbody></table>
解决方法
以下应该可以满足您的需求:
$("table input[type=checkBox]").click(function(){ var countchecked = $("table input[type=checkBox]:checked").length; if(countchecked >= 5) { $('table input[type=checkBox]').not(':checked').attr("disabled",true); } else { $('table input[type=checkBox]').not(':checked').attr("disabled",false); }
});
(通用)以下将禁用所有未选中的复选框:
$('input[type=checkBox]').not(':checked').attr("disabled","disabled");