Question

我有一张表，我想要禁用所有复选框，但每行中的第一个复选框除外。当单击任何行中的第一个复选框时，该行的所有复选框都变为可单击。

以下是我正在使用的代码，请在错误和解决方案上提出建议。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('tr td').not('nth-child(2)').find('input[type=checkbox]').prop('disabled',true);
    $('input[type=checkbox]').change(function(){
        if($(this).prop('checked',true))
            $(this).parent().nextAll().find('input[type=checkbox]').removeProp('disabled');
        else
            {
                $(this).parent().nextAll().find('input[type=checkbox]').prop('checked',false);
                $(this).parent().nextAll().find('input[type=checkbox]').prop('disabled',true);
            }
    });
});
</script>
</head>
<body>

<table border='1'>

<tr>
<td>Test1</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>

<tr>
<td>Test2</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>

<tr>
<td>Test3</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>

<tr>
<td>Test4</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>

<tr>
<td>Test5</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>

<tr>
<td>Test6</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>

</table>
</body>
</html>

Answer 1

你可以尝试下面的jquery：

$(function(){
    // disable all checkbox except first one in the row
    $('table tr').each(function(){
        $(this).find('input[type=checkbox]:not(:first)').attr('disabled',true);
        // add class firstCheckbox to identify first checkbox and bind click event
        $(this).find('input[type=checkbox]:first').addClass('firstCheckbox');
    });

    // bind click event to first checkbox and enable / disable other checkboxes
    $('table tr').find('.firstCheckbox').click(function(){
        $(this).closest('tr').find('input[type=checkbox]:not(:first)').attr('disabled',!$(this).is(':checked'));
    });
});

<强> Demo

Answer 2

你需要在dom load上循环每个td 所以你的jquery

 $(document).ready(function () {   
    $("table tr td").not(':nth-child(2)').find("input").prop("disabled", true);       
    $("table tr td").find("input").click(function () {
        if($(this).closest('td').index() == 1){
            if($(this).is(':checked')){
                $(this).closest('tr').find("input").prop("disabled", false);}
            else{
                 $(this).closest('tr').find("input").prop("disabled", true);
                $(this).prop("disabled", false);
                 $(this).closest('tr').find("input").prop("checked", '');
                }
        }

    });
});

DEMO

Answer 3

在jquery中使用:nth-child来选择元素

$(document).ready(function () {

   // disable the all check box except first one
    $("table tr td").not(':nth-child(2)').find("input").prop("disabled", true); 

        $("table tr td:nth-child(2)").find("input").click(function () {
        // disabled & enabled based on checkbox click
        $(this).closest("tr").find("input").not(':first').prop("disabled", !this.checked);

    });
});

单击另一个复选框时无法从复选框中应用和删除已禁用的属性

3 个答案:

UPDATED DEMO