jQuery的：切换基于同级复选框禁用状态，集体

Question

在HTML中，每场都有一个复选框旁边的文本输入，就像这样：

<div class="field"> 
    <input type="checkbox" id="checkbox1" /> 
    <input type="text" id="textbox1" /> 
</div> 
<div class="field"> 
    <input type="checkbox" id="checkbox2" /> 
    <input type="text" id="textbox2" /> 
</div> 

使用jQuery's Attribute Starts With Selectors，很容易扎click事件上与其兄弟文本框的禁用状态的每个复选框 - 这已经工作得很好：

$("input[id^='checkbox']").click(function() { 
    $(this).siblings().prop("disabled", !this.checked); 
}); 

我无法弄清楚什么是相似的简要说明，我可以运行一个时间（从另一个事件），将切换所有这些文本框基于其关联的当前选中状态特德复选框。以下是大致什么我以为这是应该的，但它只是切换所有的人，而不是每个单独酌情 - 即它不工作：

$("input[id^='textbox']").prop("disabled", $(this).prev().is(':checked')); 

我也试图与一个变化处理程序，但它当复选框本身重新启用时不会触发。

对我有何建议？

Answer 1

如果我已经正确理解你，你想启用文本输入，如果相应的复选框是检查。建议的方法：

$('input[type="checkbox"]').on('change', function() { 
 
    $(this).next().prop('disabled', !this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="field"> 
 
    <input type="checkbox" id="checkbox1" /> 
 
    <input type="text" disabled id="textbox1" /> 
 
</div> 
 
<div class="field"> 
 
    <input type="checkbox" id="checkbox2" /> 
 
    <input type="text" disabled id="textbox2" /> 
 
</div>

Answer 2

比change活动的其他，你可以使用click事件除了相关sibling查询到明年访问文本框的复选框。而在您的评论的更新，你可以使用一个fieldset元素来实现你想要的：

$(".field > :checkbox").on("click", function(){ 
 
if($(this).is(":checked")){ 
 
    $(this).siblings("fieldset").removeAttr("disabled"); 
 
}else{ 
 
    $(this).siblings("fieldset").attr("disabled","disabled"); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="field"> 
 
    <input type="checkbox" id="checkbox1" /> 
 
    <fieldset disabled="disabled" > 
 
     <input type="text" id="textbox1-1" /> 
 
     <input type="text" id="textbox1-2" /> 
 
     <textarea id="textarea-1"></textarea> 
 
     <input type="checkbox">Test 1 
 
    </fieldset> 
 
</div> 
 
<div class="field"> 
 
    <input type="checkbox" id="checkbox2" /> 
 
    <fieldset disabled="disabled" > 
 
     <input type="text" id="textbox2-1" /> 
 
     <input type="text" id="textbox2-2" /> 
 
     <textarea id="textarea-2"></textarea> 
 
     <input type="checkbox">Test 2 
 
    </fieldset>  
 
</div>