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

Question

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

<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);
    }
});

Answer 1

无论你所做的都是部分正确的，你所做的就是你以 $(this) 为目标，所以显然它将采用复选框输入并找到最接近的“td”并仅禁用第一个输入标签，因为它是最接近的一个，您可以通过定位具有此表单控制类的元素并禁用该事件来完成此操作，以便它将应用于具有此类的所有输入字段，该类间接是其他三个输入字段。

$('input[type="checkbox"]').click(function () {
    if(!this.checked) {
        $('.form-control').attr('disabled' , true);
    } else {
        $('.form-control').attr('disabled' , false);
    }
});

或者第二个选择是您可以使用此 every 语句来更新输入元素。