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

你应该可以做这样的事情 - 获取所有元素，然后禁用。你只需点击复选框就可以了。

var inputs, index;

inputs = document.getElementsByTagName('input'); // get all of the input elements
for (index = 0; index < inputs.length; ++index) { // loop through them
    inputs[index].disabled = true; // disable them
}

Answer 2

无论你做了什么都是部分正确的，你所做的就是用$（这个）作为目标，所以很明显它会输入复选框并找到最接近的＆＃39; td＆＃39;并且只禁用第一个输入标记，因为它是最接近的，而你可以通过定位具有此表单控制类的元素并禁用该事件来执行此操作，以便它将应用于具有此类的所有输入字段，即间接地另外三个输入字段。

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

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

Answer 3

问题在于您只选择一个元素：

$(this).closest('td').next('td').find('input:text')

这将找到最接近复选框的<td>祖先元素，然后选择下一个兄弟<td>元素，最后获取与<td>元素匹配的input:text元素的后代{{ 1}}。这将产生一个元素，因为只有一个输入的类型为“text”，而您只在一个<td>内选择。

您想要做的是选择表格行input（类<tr>）中不是复选框的所有.select_tr元素：

$(this).closest('.select_tr').find('input:not([type=checkbox])')

这将选择课程<tr>的父.select_tr，然后选择没有input的所有type=checkbox子项。

示例：

$('.select_tr input:checkbox').change(function() {
  $(this).closest('.select_tr').find('input:not([type=checkbox])').prop("disabled", !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <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>
</table>

Answer 4

您可以尝试这样的事情：

var elemCheckbox = document.querySelectorAll('[type="checkbox"]')[0];
var elemInputs = document.querySelectorAll('.form-control');

function toggleInputs() {
    // https://stackoverflow.com/questions/9887360/check-if-checkbox-is-checked-javascript#answer-9887439
    var shallDisable = !elemCheckbox.checked;
    // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
    for (i = 0, len = elemInputs.length; i < len; ++i) {
        // https://stackoverflow.com/questions/7526601/setattributedisabled-false-changes-editable-attribute-to-false#answer-7526666
        elemInputs[i].disabled = shallDisable;
    }
}

elemCheckbox.addEventListener("click", toggleInputs);

在评论中找到解释。此示例不会禁用该复选框（如果您的意思是这样）。

我建议在复选框中添加一个ID。这将保证明确的元素选择。

然后你可以得到document.getElementById("<yourUniqueId>");

Answer 5

您的代码并未选择所有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()可以解决您的问题。

未选中复选框时禁用输入

5 个答案: