Search code examples
javascripthtmlrequired

javascript/html:make input fields required on checkbox check

So like I want to make an input field required when a checkbox is checked an 'not required' when it is unchecked...I've tried the following code but it was not working ...please help...

<form action="#">
    <input id='req'><input type="submit"></form><input type="checkbox" onclick="req()" id="check">
    <script>

    function req(){
        var req = document.getElementById("req");
        var checkBox = document.getElementById("check");
        if (checkBox.checked == true){
            alert("checked")
            req.required==true

        } else {
          alert("uncheck")
          req.required==false
        }

    }



    </script>
Solution

  • Give this a try:

    <!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <title>Ilan's Test</title>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div id="results">
                    <form name="test" id="test" action="#" method="GET">
                        <div class="input-group">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="cbox">
                                <label class="form-check-label" for="cbox">Make field required</label>
                            </div>
                        </div><br>

                        <div class="input-group">
                            <input type="text" id="tbox" class="form-control">
                        </div><br>
                        <button type="submit" id="sub" class="btn btn-primary">Submit</button><br>
                        <small><span class="status"></span></small>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            // On click of checkbox
            $('#cbox').click(function() {
                // Check if it's checked
                if ($(this).prop('checked')) {
                    // Add the required attribute to the text input
                    $('#tbox').attr('required', '');
                    // log our results and display a small indicator span status
                    console.log('input is now required');
                    $('.status').text('input is now required');
                } else {
                    // If it isn't checked, remove the required attribute
                    $('#tbox').removeAttr('required');
                    // log our results and display a small indicator span status
                    console.log('input is no longer required');
                    $('.status').text('input is no longer required');
                }
            });
        });
    </script>
</body>

</html>