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

如果我已正确理解您，如果选中相应的复选框，您希望启用文字输入。建议的方法：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

除了change事件之外，您可以使用click之外的sibling查询来访问该复选框旁边的文本框。在评论中进行更新，您可以使用fieldset元素来实现您的目标：

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery：基于兄弟复选框，整体切换禁用状态

2 个答案: