未選中復選框時禁用輸入

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

所做的任何事情都是部分正確的，您要做的是使用$（this）定位，因此很明顯它將采用復選框輸入並找到最接近的“ td”並僅禁用第一個輸入標簽，因為它是最接近，您可以通過定位具有此表單控制類的元素並禁用事件來執行此操作，以便將其應用於具有該類的所有輸入字段，而該輸入字段間接是其他三個輸入字段。

$('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>元素，最后得到與選擇器input:text匹配的該<td>元素的后代。 這將導致單個元素，因為只有一個輸入屬於“ text”類型，並且您僅在單個<td>內部進行選擇。

您要做的是在表行<tr> （類.select_tr ）中選中所有非復選框的input元素：

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

這將選擇具有類.select_tr的父<tr> ，然后選擇其所有沒有type=checkbox input子級。

例：

 $('.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()選擇closest('td').之后的每個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()可能會解決您的問題。