如何启用/禁用另一个复选框旁边的复选框？

如果我选中其中一个复选框，我希望启用旁边的复选框。如果我取消了左侧的复选框中的一个，就在旁边的复选框，应再次禁用：如何启用/禁用另一个复选框旁边的复选框？

$('input[type="checkbox"]').change(function() { 
 
    $("input:checkbox:checked:not(.delivery)").each(function() { 
 
     if ($("input:checkbox:checked").length > 0) { 
 
     $(this).closest("tr").children('.disable').removeAttr("disabled"); 
 
     } else { 
 
     $(this).closest("tr").children('.disable').addAttr("disabled"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr> 
 
    <td><input type="checkbox"></td> 
 
    <td><input class="disable" disabled="" type="checkbox"></td> 
 
</tr> 
 
<br> 
 
<tr> 
 
    <td><input type="checkbox"></td> 
 
    <td><input class="disable" disabled="" type="checkbox"></td> 
 
</tr>

我的代码，它一直被禁用。

来源

2017-09-15 Jarla

这是比较容易，如果你可以给第一个复选框和第二个复选框单独的类，即：

<tr> 
    <td><input class="checkbox-parent" type="checkbox"></td> 
    <td><input class="checkbox-child disable" disabled="" type="checkbox"></td> 
</tr>

然后，我们可以将事件侦听简单地绑定到在这种情况下的第一个复选框，.checkbox-parent。当它被选中时，我们通过遍历DOM来关闭它的关联子。这是通过找到最近的<tr>元素，然后选择.checkbox-child来完成的。要启用/禁用复选框，您可以简单地使用.prop('disabled', <boolean>)。

$('.checkbox-parent').change(function() { 
    // Traverse the DOM to get associated child checkbox 
    var $child = $(this).closest('tr').find('.checkbox-child'); 

    // Update child state based on checked status 
    // - set disabled to false when is checked 
    // - set disabled to true when is unchecked 
    $child.prop('disabled', !this.checked); 
});

你应该不是使用.removeAttr()甚至使用.attr()操纵布尔属性，如checked，selected，multiple，disabled，等

如果你不能改变你的标记...

或者，如果您的marku p不能更改，您可以在表格行中选择第一个（使用.first()或.eq(0)）和第二个/最后一个复选框（第二个使用.eq(1)，最后使用.last()）。

请注意，这不是那里最好的解决方案，因为对标记的更改意味着您将不得不修改这些硬编码的魔术常量和逻辑。

// Bind change event to the FIRST checkbox 
$('tr input[type="checkbox"]').first().change(function() { 

    // Get the SECOND checkbox 
    var $child = $(this).closest('tr').find('input[type="checkbox"]').eq(1); 

    // If you want to get the LAST checkbox, use: 
    // var $child = $(this).closest('tr').find('input[type="checkbox"]').last(); 

    // Update child state based on checked status 
    // - set disabled to false when is checked 
    // - set disabled to true when is unchecked 
    $child.prop('disabled', !this.checked); 
});

有一些问题与您的标记必须被解决，太：

你必须换你<tr>在<table>元素，否则浏览器会简单地把所有的表格元素超出您的标记以试图使其语义正确
<br />不是有效的直接子<table>

在这里看到更新后的代码：

$('.checkbox-parent').change(function() { 
 
    // Traverse the DOM to get associated child checkbox 
 
    var $child = $(this).closest('tr').find('.checkbox-child'); 
 
    
 
    // Update child state based on checked status 
 
    $child.prop('disabled', !this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td><input class="checkbox-parent" type="checkbox"></td> 
 
    <td><input class="checkbox-child disable" disabled="" type="checkbox"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input class="checkbox-parent" type="checkbox"></td> 
 
    <td><input class="checkbox-child disable" disabled="" type="checkbox"></td> 
 
    </tr> 
 
</table>

来源

2017-09-15 12:02:37 Terry

另一种解决方案（使用现有的标记），我们可以change事件附加到那些在DOM准备启用的复选框。

在变化事件，得到了行中的所有checkboxes的名单，排除当前checkbox被点击，然后更改基于当前的复选框选择另一个复选框的disabled属性。

$(function() { 
 
\t $('input[type="checkbox"]:enabled').change(function() { 
 
\t \t $(this).closest("tr").find("input:checkbox").not(this).attr('disabled',!this.checked) 
 
\t }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<table> 
 
\t <tr> 
 
\t \t <td><input type="checkbox"></td> 
 
\t \t <td><input class="disable" disabled="" type="checkbox"></td> 
 
\t </tr> 
 
\t <br> 
 
\t <tr> 
 
\t \t <td><input type="checkbox"></td> 
 
\t \t <td><input class="disable" disabled="" type="checkbox"></td> 
 
\t </tr> 
 
</table>

来源

2017-09-15 12:09:51

在这里，你去了一个解决方案https://jsfiddle.net/b5bdjndf/

$('input[type="checkbox"]').on('change', function(){ 
 
    if($(this).is(':checked')){ 
 
    \t $(this).closest('td').next('td').find('input[class="disable"]').removeAttr('disabled'); 
 
    } else { 
 
    \t $(this).closest('td').next('td').find('input[class="disable"]').attr('disabled', 'disabled'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 

 
    <tr> 
 
    <td><input type="checkbox"></td> 
 
    <td><input class="disable" disabled="" type="checkbox"></td> 
 
    </tr> 
 
    <br> 
 
    <tr> 
 
    <td><input type="checkbox"></td> 
 
    <td><input class="disable" disabled="" type="checkbox"></td> 
 
    </tr> 
 

 
</table>

由于您的复选框是td里面，你需要遍历到td再到下一个td &找到checkbox。

希望这会帮助你。

来源

2017-09-15 12:27:17 Shiladitya

如何启用/禁用另一个复选框旁边的复选框？

回答

相关问题