Checkbox Enable/Disable with jQuery

Question

I want to have a jquery function that will be activated when any checkbox is clicked and based on the value field of the checkbox that is clicked it will disable or enable other checkboxes.

So far I have:

$(function () {
    $('input [type="checkbox"]').click(function () {

    });
});

Okay, so I've made some progress.. but it's still not working.

<script type="text/javascript">
$(function () {
    $(':checkbox').click(function () {

        $value = $(this).attr('value');

        if ($(this).is(':checked'))
        {
            switch ($value)
            {
                case "BLIPA":
                    $(':checkbox[value*="B"]').attr('disabled', true);
            }
        }
        else
        {
            $(':checkbox').each(function()
            {

            }
        }
    });
});

Have I made any mistakes?

Edit:

Okay so I have solve it. Here is the solution:

<script type="text/javascript">
$(function () {
    $("input[type='checkbox']").click(function () {

        var value = $(this).attr('value');

        if ($(this).is(':checked')) {

            var modules = FindModuleRules(value);

            $(':checkbox[value*="' + modules[0] + '"]').attr('disabled', true);
            $(':checkbox[value*="' + modules[1] + '"]').attr('disabled', true);
            $(':checkbox[value*="' + modules[2] + '"]').attr('disabled', true);
            $(':checkbox[value~="' + value + '"]').attr('disabled', false);

        }
        else {
            var modules = FindModuleRules(value);

            $(':checkbox[value*="' + modules[0] + '"]').attr('disabled', false);
            $(':checkbox[value*="' + modules[1] + '"]').attr('disabled', false);
            $(':checkbox[value*="' + modules[2] + '"]').attr('disabled', false);
        }
    });

    function FindModuleRules(string) {

        var modules = new Array();

        var bRegex = /B/;
        var lRegex = /L/;
        var aRegex = /A/;

        if (string.search(bRegex) != -1)
            modules[0] = "B";
        else
            modules[0] = "X";
        if (string.search(lRegex) != -1)
            modules[1] = "L";
        else
            modules[1] = "X";
        if (string.search(aRegex) != -1)
            modules[2] = "A";
        else
            modules[2] = "X";

        return modules;
    }

});

Gabriele Petrioli · Accepted Answer · 2012-06-12 19:19:30Z

2

First of all you must not have a space between input and [type="checkbox"] because that looks for checkboxes inside other input elements (which is invalid)..

so something like

$('input[type="checkbox"]').click(function () {
    $('otherselector').prop('disabled', this.checked);
});

answered Jun 12, 2012 at 19:19

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tim Hobbs · Accepted Answer · 2012-06-12 19:31:14Z

1

Without seeing exactly how you have your markup setup, it is harder to tell you what you need to do. However, her is a jsfiddle to illustrate:

HTML

<input type="checkbox" id="ckall" /> Check 'em all!
<ul>
    <li><input type="checkbox" /> Item 1</li>
    <li><input type="checkbox" /> Item 2</li>
    <li><input type="checkbox" /> Item 3</li>
    <li><input type="checkbox" /> Item 4</li>
    <li><input type="checkbox" /> Item 5</li>
</ul>

JS

$("input[type='checkbox']").click(function() {
    $("ul :checkbox").attr("checked", $(this).is(":checked"));            
});

Depending on your markup, and what exactly you are looking to do will determine your jQuery selectors. However, I assume you are looking to create a "check all" type of checkbox. If so, you'll see in the fiddle that the check all checkbox event then selects all the checkboxes within some container element. If you don't do this, then you will also wind up possibly changing the state of your check all checkbox.

answered Jun 12, 2012 at 19:31

Tim Hobbs

2,02717 silver badges24 bronze badges

2 Comments

Rick Eyre Over a year ago

I don't want to make a check all checkbox. I have certain check boxes that rule out other ones. So I need to be able to disable and enable check boxes based on that.

Tim Hobbs Over a year ago

@Rick Eyre - then the only thing I can suggest is that you use class names to group them so that you can specifically target groups when another box is un/checked, otherwise you are stuck with lots of looping, and that can really impact perf.

Thomas · Accepted Answer · 2012-06-12 19:11:59Z

0

$('input [type="checkbox"]').click(function () {
    if($(this).is(':checked')) {
        //do stuff
    }
})

answered Jun 12, 2012 at 19:11

Thomas

8,8592 gold badges28 silver badges54 bronze badges

2 Comments

Rick Eyre Over a year ago

How would I loop through the rest of the checkboxes on the page after I determine whether or not the checkbox is checked?

Thomas Over a year ago

$(':checkbox').each(function(){ //$(this)... }

Rick Eyre · Accepted Answer · 2012-06-27 17:28:34Z

I have answered the question. Thanks for all the help.

<script type="text/javascript">
$(function () {
    $("input[type='checkbox']").click(function () {

        var value = $(this).attr('value');

        if ($(this).is(':checked')) {

            var modules = FindModuleRules(value);

            $(':checkbox[value*="' + modules[0] + '"]').attr('disabled', true);
            $(':checkbox[value*="' + modules[1] + '"]').attr('disabled', true);
            $(':checkbox[value*="' + modules[2] + '"]').attr('disabled', true);
            $(':checkbox[value~="' + value + '"]').attr('disabled', false);

        }
        else {
            var modules = FindModuleRules(value);

            $(':checkbox[value*="' + modules[0] + '"]').attr('disabled', false);
            $(':checkbox[value*="' + modules[1] + '"]').attr('disabled', false);
            $(':checkbox[value*="' + modules[2] + '"]').attr('disabled', false);
        }
    });

    function FindModuleRules(string) {

        var modules = new Array();

        var bRegex = /B/;
        var lRegex = /L/;
        var aRegex = /A/;

        if (string.search(bRegex) != -1)
            modules[0] = "B";
        else
            modules[0] = "X";
        if (string.search(lRegex) != -1)
            modules[1] = "L";
        else
            modules[1] = "X";
        if (string.search(aRegex) != -1)
            modules[2] = "A";
        else
            modules[2] = "X";

        return modules;
    }

});

I use the FindModuleRule function to sort through all the value strings and pick out key characters that only appear in certain values such as 'A', 'L', or 'B' if none is found then I assign to 'X' which is not found in any of the value strings. I then use that character to select all check boxes with values that contain the character and either switch them on or off depending and then switch the check box that was clicked to its appropriate state.

Collectives™ on Stack Overflow

Checkbox Enable/Disable with jQuery

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related