Home/ Questions/Q 7034309
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T01:10:12+00:00

The sample code uses JQuery to prevent the user from unchecking the last checked

  • 0

The sample code uses JQuery to prevent the user from unchecking the last checked checkbox. It works as expected in Firefox and Chrome, but not in Opera or IE.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #checkboxContainer label {
            float: left;
            clear: right;
        }
        #checkboxContainer input {
            float: left;
            clear: left;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#checkboxContainer input[type='checkbox']").change(function(evt) {
                if ($("#checkboxContainer input[type='checkbox']:checked").length == 0) {
                    console.log("Only 1 checkbox; can't uncheck.");
                    $(evt.target).attr("checked", "checked");
                }
            });
        });
    </script>
</head>
<body>
    <div id="checkboxContainer">
        <input type="checkbox" id="checkbox1" checked="checked"/>
        <label for="checkbox1">1</label>
        <input type="checkbox" id="checkbox2"/>
        <label for="checkbox2">2</label>
    </div>
</body>
</html>

What’s going on here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This seems to work in IE and Opera if you change your selector to “:checkbox” instead of “input[type=’checkbox’]”. The jQuery docs state that the two are equivalent, so I am not sure how to explain the difference in behavior.

    <script type="text/javascript">
    $(document).ready(function() {
        $("#checkboxContainer :checkbox").change(function(evt) {
            if ($("#checkboxContainer :checkbox:checked").length == 0) {
                console.log("Only 1 checkbox; can't uncheck.");
                $(evt.target).attr("checked", "checked");
            }
        });
    });
</script>
    • 0