JSFiddle - React, Tailwind, and code Playground

by Simon Hartley

HTML

<p>This form is enabled once atleast one checkbox is checked!</p>
<form class="singleCheckboxForm">
    <label>
        <input type="checkbox" class="roof" />Roof</label>
    <label>
        <input type="checkbox" />Checkbox 1</label>
    <label>
        <input type="checkbox" class="antenna" disabled/>Antenna</label>
    <label>
        <input type="checkbox" class="sunroof" disabled/>Sunroof</label>
    <input type="submit" value="Send" />
</form>
<p>This form is not affected:</p>
<form class="singleCheckboxForm">
    <label>
        <input type="checkbox" title="roof" class="roof" />Roof</label>
    <label>
        <input type="checkbox" />Checkbox 1</label>
    <label>
        <input type="checkbox" class="antenna" disabled/>Antenna</label>
    <label>
        <input type="checkbox" class="sunroof" disabled/>Sunroof</label>
    <input type="submit" value="Send" />
</form>

JavaScript

$(function () {
    $('form').each(function () {
        var form = $(this);
        form.find('.roof').change(function () {
            if (form.find('.roof:checked').length) {
                form.find('.antenna, .sunroof').removeAttr('disabled');
            } else {
                form.find('.antenna, .sunroof').attr('disabled', 'disabled').prop('checked', false);
            }
        });
    });
});

/*$(function(){
    $('.singleCheckboxForm').each(function() {
        var form = $(this);
        form.find('input[type="checkbox"]').click(function() {
            if (form.find('input[type="checkbox"]:checked').length > 0)
            {
                form.find('input[type="submit"]').removeAttr('disabled');
            }
        });

        form.find('input[type="submit"]').attr('disabled','disabled');
    });    
});*/