Disable or Enable Checkbox depending upon Dropdown Selection using JavaScript and jQuery

A web form usually has many controls on it, a textbox, dropdown list, combos, checkboxes etc. Sometimes the functioning and usability of a control depends on some kind of validations. Here, in this post I’ll show you how to disable or enable checkbox controls depending upon selection of dropdown list values using JavaScript and jQuery.

The dropdown list in my example here is an HTML5 <select> element. Its an easy to use control and you can quickly create a dropdown list. I also have three Checkbox controls, which are disabled.

What I want is when a user selects a value from the dropdown list, based on a certain condition the script (using JavaScript and jQuery) will enable or disable the checkboxes.

Enable or Disable Checkboxes using JavaScript

The Markup

In the first example here, I have added onchange event to the <select> element. Whenever a user selects a value from the list, it would call a JavaScript function called updateCheckBox().

<!DOCTYPE html>
<html>
<head>
    <title>Enable or Disable Checkbox on DropDown Selection - JavaScript</title>
</head>
<body>
    <div>
        Laptop: 
        <select id="sel" onchange="updateCheckBox(this)">
            <option>-- Select --</option>
            <option value="Del">Del</option>
            <option value="Asus">Asus</option>
        </select>
        <p>
            <input type="checkbox" name="offer" disabled="disabled" id="chk1" /> Exchange Offer <br />
            <input type="checkbox" name="offer" disabled="disabled" id="chk2" /> Gift Voucher <br />
            <input type="checkbox" name="offer" disabled="disabled" id="chk3" /> Free UPS
        </p>
    </div>

    <div id="div" 
        style="margin-top:10px;display:block;color:green;">
    </div>
</body>

<script>
    function updateCheckBox(opts) {
        var chks = document.getElementsByName("offer");

        if (opts.value == 'Del') {
            for (var i = 0; i <= chks.length - 1; i++) {
                chks[i].disabled = false;
                document.getElementById('div').innerHTML = 'Checkboxes enabled';
            }
        }
        else {
            for (var i = 0; i <= chks.length - 1; i++) {
                chks[i].disabled = true;
                chks[i].checked = false;
                document.getElementById('div').innerHTML = 'Checkboxes disabled and unchecked';
            }
        }
    }
</script>
</html>

Try it

Enable or Disable Checkboxes using jQuery

The second example uses jQuery to do what we just did in the above example. However, the markup changes a little. You do not add the onchange event to the <select> element. You will also have to add the jQuery CDN in the <head> section of the markup.

The Markup and the jQuery Script

<html>
<head>
    <title>Enable or Disable Checkbox on DropDown Selection using jQuery</title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    Laptop: 
    <select id="sel">
        <option>-- Select --</option>
        <option value="Del">Del</option>
        <option value="Asus">Asus</option>
    </select>
    <p>
        <input type="checkbox" name="offer" disabled="disabled" id="chk1" /> Exchange Offer <br />
        <input type="checkbox" name="offer" disabled="disabled" id="chk2" /> Gift Voucher <br />
        <input type="checkbox" name="offer" disabled="disabled" id="chk3" /> Free UPS
    </p>
</body>

<div id="lbl" style="margin-top:10px;display:none;color:green;"></div>

<script>
    $(document).ready(function () {
        $('#sel').change(function () {
            if ($(this).val() == "Del") {
                $(':checkbox').each(function () {
                    $(this).prop('disabled', false);
                    $('#lbl').text('Checkboxes enabled').show('slow');
                });
            }
            else {
                $(':checkbox').each(function () {
                    $(this).prop('disabled', true);
                    $(this).prop('checked', false);
                    $('#lbl').text('Checkboxes disabled and unchecked').show('slow');
                });
            }
        });
    });
</script>
</html>

Try it

Conclusion

The result is the same for both the examples. You might have noticed another important thing that along with disable and enable functions it also checks and uncheck the Checkboxes based on the condition. In the jQuery example I have used the .prop() method. I have explained about this method in an article before. You can read it here.

← PreviousNext →