JSFiddle - React, Tailwind, and code Playground

by bruceyang

HTML

<form method="post">
    <fieldset>
        <legend>What is Your Favorite Pet?</legend>
        <input type="checkbox" name="animal" value="Cat" required/>Cats
        <br />
        <input type="checkbox" name="animal" value="Dog" required />Dogs<br />
        <input type="checkbox" name="animal" value="Bird" required />Birds<br />
        <input type="submit" value="Submit now" />
    </fieldset>
</form>

JavaScript

var requiredCheckboxes = $(':checkbox[required]');

requiredCheckboxes.change(function(){
    if(requiredCheckboxes.is(':checked')) {
        requiredCheckboxes.removeAttr('required');
    }
    else {
        requiredCheckboxes.attr('required', 'required');
    }
});