javascript - 选择同一 div 内的元素

Question

我有 4 个输入类型和两个同名的 div。

<div>
<input class="palmetta" type="checkbox" name="palmetta[]" value="1"> Palmetta
<input class="palmettah" type="text" value="0" name="palmetta[]" ><br>
</div>

<div>
<input class="palmetta" type="checkbox" name="palmetta[]" value="1"> Palmetta
<input class="palmettah" type="text" value="0" name="palmetta[]" ><br>
</div>

当我检查第一个 div 上的“palmetta”时，是否有一种方法可以只针对第一个 div 上的“palmettah”？

我已经创建了这个:

$("div .palmetta").change(function() {

if(this.checked) {
    $(".palmettah").prop('disabled', true);
} else {
    $(".palmettah").prop('disabled', false);
}

});

此脚本禁用所有 palmettah 但我只需要禁用选中输入的相同 div 内的 palmettah。

Answer 1

根据更改事件触发的元素选择输入元素用于该用途 next() 方法，因为它紧挨着复选框。尽管此处不需要 if 条件，但使用 this.checked 作为 prop() 中的第二个参数 方法。

$("div .palmetta").change(function() {
    // get the element `this` refers to it's dom object
    $(this)
       // get the element next to it
       .next()
       // update `disabled` property based on 
       // `checked` property of checkbox
       .prop('disabled', this.checked);
});

$("div .palmetta").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>
  <input class="palmetta" type="checkbox" name="palmetta[]" value="1">Palmetta
  <input class="palmettah" type="text" value="0" name="palmetta[]">
  <br>
</div>

<div>
  <input class="palmetta" type="checkbox" name="palmetta[]" value="1">Palmetta
  <input class="palmettah" type="text" value="0" name="palmetta[]">
  <br>
</div>