JSFiddle - React, Tailwind, and code Playground

by Simon Hartley

HTML

<form id="form1">
    <div id="button-5">
        <input type="checkbox" id="check1" class="roof">
        <label for="check1">Front Bumper Lower</label>
        <input type="checkbox" id="check2">
        <label for="check2">Front Bumper Upper</label>
        <input type="checkbox" id="check3">
        <label for="check3">Nose</label>
        <input type="checkbox" id="check4">
        <label for="check4">Hood</label>
    </div>
    <div id="button-6">
        <input type="checkbox" id="check5" class="sunroof">
        <label for="check5">Roof</label>
        <input type="checkbox" id="check6">
        <label for="check6">Trunk</label>
        <input type="checkbox" id="check7">
        <label for="check7">Rear Spoiler</label>
        <input type="checkbox" id="check8" class="antenna">
        <label for="check8">Rear Bumper</label>
    </div>
</form>

<form id="form2">
    <div id="button-5">
        <input type="checkbox" class="roof">
        <label for="check1">Front Bumper Lower</label>
        <input type="checkbox" id="check2">
        <label for="check2">Front Bumper Upper</label>
        <input type="checkbox" id="check3">
        <label for="check3">Nose</label>
        <input type="checkbox" id="check4">
        <label for="check4">Hood</label>
    </div>
    <div id="button-6">
        <input type="checkbox" id="check5" class="sunroof">
        <label for="check5">Roof</label>
        <input type="checkbox" id="check6">
        <label for="check6">Trunk</label>
        <input type="checkbox" id="check7">
        <label for="check7">Rear Spoiler</label>
        <input type="checkbox" id="check8" class="antenna">
        <label for="check8">Rear Bumper</label>
    </div>
</form>

JavaScript

$('.roof').change(function () {
    $('.sunroof, .antenna').prop("disabled", !this.checked);
}).change();

/*$(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');
            }
            else
            {
                form.find('input[type="submit"]').attr('disabled','disabled');
            }
        });
        
        form.find('input[type="submit"]').attr('disabled','disabled');
    });    
});*/
/*$('.roof').change(function () {
    $('.sunroof, .antenna').prop("disabled", !this.checked);
}).change();*/
/*
$(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');
            }
            else
            {
                form.find('input[type="submit"]').attr('disabled','disabled');
            }
        });
        
        form.find('input[type="submit"]').attr('disabled','disabled');
    });    
});*/