javascript - 未选中复选框时禁用输入

我有这段代码，当未选中此复选框时，我想禁用所有输入。

<tr class="select_tr">
    <td><?= ucwords($food_name); ?></td>

    <td class="form-group text-center">
        <input value="<?= $order_food_id; ?>" type="checkbox" name="select_food[]" checked>
    </td>

    <td class="form-group">
        <input value="<?= $order_food_total_members; ?>" type="text" name="total_members[]" class="form-control" placeholder="Total Members">
    </td>

    <td class="form-group ">
        <input value="<?= $order_food_date; ?>" type="date" name="food_date" class="form-control">
    </td>

    <td class="form-group ">
        <input value="<?= $order_food_time; ?>" type="time" name="food_time" class="form-control">
    </td>
</tr>

我已经使用了这段代码，但是它仅禁用了第一个输入，并且我不知道如何标记其余两个。

$('input[type="checkbox"]').click(function () {
    if(!this.checked) {
        $(this).closest('td').next('td').find('input:text').attr('disabled' , true);
    } else {
        $(this).closest('td').next('td').find('input:text').attr('disabled' , false);
    }
});

最佳答案

您的代码未选择所有inputs。使用nextAll()在td之后选择每个closest('td').

$('input[type="checkbox"]').click(function(){
 if(!this.checked){
  $(this).closest('td').nextAll('td').find('input').attr('disabled' , true);
 }else{
  $(this).closest('td').nextAll('td').find('input').attr('disabled' , false);
 }
});

  JQuery.next（）用于选择所选元素之后的第一个匹配元素


因此，您的代码仅会影响前一个。


  JQuery.nextAll（）用于选择所选元素之后的下一个所有匹配的元素。


因此，使用nextAll()代替next()可能会解决您的问题。