Question

如果用户选中了四个复选框之一，我正在尝试启用提交按钮。

这是我的Javascript：

<script>
$(function() {
    $('input.required').click(function() {
        var unchecked = $('input.required:not(:checked)').length;
        if (unchecked == 0) {
            $('#submitBtn').removeAttr('disabled');
        }
        else {
            $('#submitBtn').attr('disabled', 'disabled');
        }
    });
});
</script>

以下是我的表单元素：

            <input class="required" name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off"/>
            <label for="check1"><span class="style1">Equipment Dropped Off &nbsp; &nbsp; </span></label>
            <span class="style1">
            <input class="required" name="work" type="checkbox" id="check2" value="work"/>
            <label for="check2">Work performed &nbsp; &nbsp; </label>
            <input class="required" name="payment" id="check3" type="checkbox" value="payment" />
            <label for="check3">Payment Recieved &nbsp; &nbsp; </label>
            <input class="required" name="equipment_picked_up" id="check4" type="checkbox" value="equipment_picked_up" />
            <label for="check4">Equipment Picked Up</label>

    <input class='btn-style' data-rol="none" id="submitBtn" type="submit" name="submitBtn" value="STEP 4 - SAVE SIGNATURE" disabled="disabled">

只要我选中一个方框，我的浏览器控制台就会显示：无法设置属性'禁用'为空

我做错了什么？

Answer 1

您在第一个输入中使用了错误的ID

<input class="required" name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off" onclick = "document.getElementById('submitBtn').disabled=false;"/>

此外，您应该更改您的JavaScript代码：

$(function() {
    $('input.required').click(function() {
        var checked = $('input.required:checked').length;
        if (checked != 0) {
            $('#submitBtn').removeAttr('disabled');
        }
        else {
            $('#submitBtn').attr('disabled', 'disabled');
        }
    });
});

Answer 2

问题在于您的第一个复选框，即onclick事件：

<input class="required" name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off" onclick="document.getElementById('submit').disabled=false;" />

删除onclick事件或将其更改为

onclick="document.getElementById('submitBtn').disabled=false;"

禁用提交直到检查复选框

2 个答案: