Question

我有4个输入类型和2个同名的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，但我需要仅在已检查输入的同一palmettah内禁用div。

Answer 1

根据使用 next() 方法的更改事件触发元素选择输入元素，因为它紧邻复选框旁边。虽然此处不需要条件，但请使用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>

Answer 2

您可以将查询范围仅限于当前元素parent：

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

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

});

您可以从当前元素向上查看

....
$(this).parent().find('.palmettah').prop('disabled', false);
....

或者你可以找兄弟姐妹

....
$(this).siblings('.palmettah').prop('disabled', false);
....

选择同一div内的元素

2 个答案: