JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<form action="" method="post">
    <div>
        <input type="radio" name="foo" value="foo1" id="foo1" checked="checked">
        <label for="foo1">Not interesting 1</label><br> 

        <input type="radio" name="foo" value="foo2" id="foo2">
        <label for="foo2">Not interesting 2</label><br> 

        <input type="radio" name="bar" value="disallow" id="disallow" checked="checked">
        <label for="disallow">Disallow checkbox</label><br>

        <input type="radio" name="bar" value="allow" id="allow">
        <label for="allow">Allow checkbox</label><br> 

        <input type="checkbox" id="some_checkbox" name="some_checkbox">
        <label for="some_checkbox">some checkbox</label>
    </div>
</form>

JavaScript

function update() {
    var element = $("input[name='bar']:checked");   //BUGGY
    console.log( element );
    //var element = $("input[name='bar']").filter(":checked");//WORKING

    var value = element.val();

    if (value == "disallow") {
        $("#some_checkbox").prop({
            disabled: true
        });
    } else {
        $("#some_checkbox").prop({
            disabled: false
        });
    }
}

update();
$("input[type='radio']").change( update );