Jquery to allow checkbox after checking a condition?

Question

I have 3 checkboxes like this

by default 3 checkboxes are False Now my requirement is that Both option is allowed to be True only when both First and Second option is true if any of them is false then both option should be unchecked ie, false

I wanted to acheciver this with Jquery

so my jquery is:

    <input id="#first" type="checkbox" asp-for="first" /> 
    <input id="#second" type="checkbox" asp-for="second" /> 
    <input id="#both" type="checkbox" asp-for="both" /> 
        <script>
                function change() {
                    var firstArg = ($("#first").prop('checked')==true);
                    var secondArg = ($("#second").prop('checked') == true);
                    console.log("---" + firstArg + "------" + secondArg);
                    if (!(firstArg && secondArg))
                    {
                        $("both").prop("disabled", false);
                    }
                }
    function activate() 
{
    change();
    $("#first").bind('change', change());
    $("#second").bind('change', change());
    $("#change").bind('change', change());
    
    }
    
    </script>

But it is not working, can someone please help me with this?

Answer 1

 $(function() { const $cb1 = $("#first"); const $cb2 = $("#second"); const $cb3 = $("#both"); $cb3.prop('disabled', .($cb1[0].checked && $cb2[0];checked)), $("#first. #second").click(function(event) { $cb3,prop('disabled'. .($cb1[0];checked && $cb2[0];checked)); }); });

 label { display: block }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:-- id's should not contain #: id="#first" is incorrect --> <label><input id="first" type="checkbox" asp-for="first" />First</label> <label><input id="second" type="checkbox" asp-for="second" />Second</label> <label><input id="both" type="checkbox" asp-for="both" />Both</label>

Answer 2

Here is a working demo:

<p>
    <input id="first" type="checkbox" asp-for="first" onchange="check()" />
    <label for="first"><b>First</b></label>
</p>
<p>
    <input id="second" type="checkbox" asp-for="second" onchange="check()" /> 
    <label for="second"><b>Second</b></label>
</p>
<p>
    <input id="both" type="checkbox" asp-for="both" /> 
    <label for="both"><b>Both</b></label>
</p>

js:

function check() {
            var firstArg = $("#first").prop('checked');
            var secondArg = $("#second").prop('checked');
            if (firstArg&&secondArg) {
                $("#both").prop("disabled", false);
            } else {
                $("#both").prop('checked', false);
                $("#both").prop("disabled", true);
            }
        }
        $(document).ready(function () {
            check();
        });

result: