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;
    }

});

Answer 1

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.

Answer 2

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.

Answer 3

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);
});

Answer 4

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