禁用提交直到选中复选框

Brian Fleishman 发表于 Dev

布莱恩·弗莱什曼

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

这是我的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">

一旦我选中一个框，浏览器控制台就会显示：无法将属性“ disabled”设置为null

我究竟做错了什么？

丹尼尔·莫雷拉（Daniel Moreira）

您在第一个输入中使用了错误的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');
        }
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。