html 如果未选中复选框，则禁用按钮

Posted 2021-05-10

https://stackoverflow.com/questions/28428763/how-can-i-disable-a-button-until-a-checkbox-is-checked

========= CSS =========
.btn:disabled,
.btn.disabled{
    color:#fff;
    border-color: #a0a0a0;
    background-color: #a0a0a0;
}

.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
    color:#fff;
    border-color: #a0a0a0;
    background-color: #a0a0a0;
    opacity: .65;
}


========= HTML ===========

<div class="form-group">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="user_agreement">
        <label class="form-check-label">
            I agree to the Terms and Conditions
        </label>
    </div>
</div>


<div class="form-group">
    <div>
        <button type="submit" id="agreement_btn" class="btn btn-primary">
            REGISTER
        </button>
    </div>
</div>


=========== JS ===============
<script>
    function user_agreement() {
        $(function() {
            var chk = $('#user_agreement');
            var btn = $('#agreement_btn');

            chk.on('change', function() {
                btn.prop("disabled", !this.checked);//true: disabled, false: enabled
            }).trigger('change'); //page load trigger event
        });
    }