时间戳

首页 > 解决方案 > 未选中复选框时禁用输入

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

标签： javascriptjquery

解决方案

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

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

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

推荐阅读