javascript - 当复选框处于事件状态时，jQuery 禁用其他行中的输入

Question

我想在选中复选框时启用/禁用输入。我的网站中有许多具有相同结构的部分，所以我知道我需要使用

this

build 。我尝试做这样的事情但它不起作用。有人可以帮助我吗？

$('.component-other').on('click', function(){
    var isChecked = $(this).is(':checked');
    if (isChecked) {
        $(this).closest('.row').find('.component-other-value').prop("disabled", false);
    } else {
        $(this).closest('.row').find('.component-other-value').prop("disabled", true);
    }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="container">
  <div class="row">
    <div class="col-sm-12">
      <label for="sause-oth">Other</label>
      <input type="checkbox" name="sause" id="sause-oth" class="enable component-other">
    </div>
  </div>
  <div class="row input-row">
    <div class="col-sm-12">
      <input type="text" name="sause-other" id="sause-other" class="component-other-value" disabled="disabled" placeholder="Type text here">
    </div>
  </div>
</div>
</section>
<section>
  <div class="container">
  <div class="row">
    <div class="col-sm-12">
      <label for="sause-oth">Other</label>
      <input type="checkbox" name="sause" id="sause-oth-1" class="enable component-other">
    </div>
  </div>
  <div class="row input-row">
    <div class="col-sm-12">
      <input type="text" name="sause-other" id="sause-other-1" class="component-other-value" disabled="disabled" placeholder="Type text here">
    </div>
  </div>
</div>
</section>

Answer 1

最近的 .row 是不够的。您必须在 DOM 上再上一层。

$('.component-other').on('click', function(){
    $(this).closest('.container')
           .find('.component-other-value')
           .prop("disabled", !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <label for="sause-oth">Other</label>
        <input type="checkbox" name="sause" id="sause-oth" class="enable component-other">
      </div>
    </div>
    <div class="row input-row">
      <div class="col-sm-12">
        <input type="text" name="sause-other" id="sause-other" class="component-other-value" disabled="disabled" placeholder="Type text here">
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <label for="sause-oth">Other</label>
        <input type="checkbox" name="sause" id="sause-oth-1" class="enable component-other">
      </div>
    </div>
    <div class="row input-row">
      <div class="col-sm-12">
        <input type="text" name="sause-other" id="sause-other-1" class="component-other-value" disabled="disabled" placeholder="Type text here">
      </div>
    </div>
  </div>
</section>