Question

有几行，每行都有一个复选框，一个标签和一个输入文本

当使用jquery选中复选框时，如何启用/禁用复选框的邻居输入文本。我的意思是只启用/禁用与复选框在同一行的输入

我有：

<form>
    <p>         
        <input id="chk1" type="checkbox">
  <label >text 1 </label>
  <input id="input1" type="text">
    </p>
    <p>
      <input id="chk2" type="checkbox">
  <label >text 2 </label>
  <input id="input2" type="text">
    </p>
<p>
      <input id="chk3" type="checkbox">
  <label >text 3 </label>
  <input id="input3" type="text">
    </p>
</form>

而且不知道该怎么做

$(':checkbox').change(function(){
   $('input:text').?find?.prop("disabled", !$(this).is(':checked'));
});

here is fiddle

Answer 1

也许是这样的：

$(':checkbox').change(function(){
   var this_nr=$(this).attr('id').substr(-1);
   $('#input'+this_nr).prop('disabled', !$(this).is(':checked'));
});
$(':checkbox').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
    <p>
        <input id="chk1" type="checkbox">
  <label >text 1 </label>
  <input id="input1" type="text">
    </p>
    <p>
      <input id="chk2" type="checkbox">
  <label >text 2 </label>
  <input id="input2" type="text">
    </p>
<p>
      <input id="chk3" type="checkbox">
  <label >text 3 </label>
  <input id="input3" type="text">
    </p>
</form>

或类似这样：

$(':checkbox').change(function(){
   $('input:text').eq($(':checkbox').index(this)).prop("disabled", !$(this).is(':checked'));
});
$(':checkbox').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
    <p>
        <input id="chk1" type="checkbox">
  <label >text 1 </label>
  <input id="input1" type="text">
    </p>
    <p>
      <input id="chk2" type="checkbox">
  <label >text 2 </label>
  <input id="input2" type="text">
    </p>
<p>
      <input id="chk3" type="checkbox">
  <label >text 3 </label>
  <input id="input3" type="text">
    </p>
</form>

Answer 2

我将在表单上使用事件委托，在处理程序中使用nextAll查找下一个文本框。

// disable all the text fields
$('#myform :text').each(function () {
  $(this).prop('disabled', true);
});

$('#myform').on('change', ':checkbox', function (evt) {
  let textbox = $(this).nextAll(':text');
  textbox.prop('disabled', (i, val) => !val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <p>         
    <input id="chk1" type="checkbox">
    <label >text 1 </label>
    <input id="input1" type="text">
  </p>
  <p>
    <input id="chk2" type="checkbox">
    <label >text 2 </label>
    <input id="input2" type="text">
  </p>
  <p>
    <input id="chk3" type="checkbox">
    <label >text 3 </label>
    <input id="input3" type="text">
  </p>
  <p>
    <label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br>
    <label for="comment">Comments </label><input id="comment" type="text" value="This will toggle when you check the TOS">
  </p>
</form>

如果您的整个表单都在此复选框后跟文本框表单中，则此方法有效；如果您有其他无法控制一个或多个不应禁用的文本框的复选框，它将中断。为了更加灵活，我将一个类添加到我希望具有此行为的项目中：

// disable all the text fields
$('#myform :text.toggle-input').each(function () {
  $(this).prop('disabled', true);
});

$('#myform').on('change', ':checkbox.toggle-input', function (evt) {
  let textbox = $(this).nextAll(':text.toggle-input');
  textbox.prop('disabled', (i, val) => !val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <p>         
    <input id="chk1" class="toggle-input" type="checkbox">
    <label >text 1 </label>
    <input id="input1" class="toggle-input" type="text">
  </p>
  <p>
    <input id="chk2" class="toggle-input" type="checkbox">
    <label >text 2 </label>
    <input id="input2" class="toggle-input" type="text">
  </p>
  <p>
    <input id="chk3" class="toggle-input" type="checkbox">
    <label >text 3 </label>
    <input id="input3" class="toggle-input" type="text">
  </p>
  <p>
    <label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br>
    <label for="comment">Comments </label><input id="comment" type="text" value="This won't toggle when you check the TOS">
  </p>
</form>

Answer 3

您可以使用jQuery siblings函数来检索相邻的文本框并根据.checked属性启用/禁用它。最后，我打电话给.change()来设置文本框的初始状态。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input id="chk1" type="checkbox">
    <label>text 1 </label>
    <input id="input1" type="text">
  </p>
  <p>
    <input id="chk2" type="checkbox">
    <label>text 2 </label>
    <input id="input2" type="text">
  </p>
  <p>
    <input id="chk3" type="checkbox">
    <label>text 3 </label>
    <input id="input3" type="text">
  </p>
</form>

启用禁用输入文本及其相应的复选框jQuery

3 个答案: