选择同一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"时,有一种方法只能在第一个目标上定位"palmettah" div吗？

我创造了这个:

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

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

});

此脚本禁用所有,palmettah但我只需禁用已检查输入的palmettah内部div.

Answer 1

根据该使用next()方法的change event fired元素选择input元素,因为它紧邻复选框.虽然如果这里不需要条件,而是使用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>