Question

I did search all over but i still cant fix it. Please help:

Here is my js code:

<script type="text/javascript">
    $(document).ready(function() {
        $("#email_acc").click(function() {
            if ( $(this).is(":checked") ) {
                $("#email_group").attr("enabled","enabled");
            }
        });  

        $("#system_acc").click(function() {
            if ( $(this).is(":checked") ) {
                $("#system_group").attr("enabled","enabled");
            }
        }); 
    });
</script>

The following shows my html code:

<input type="checkbox" name="email_acc" id="email_acc" />Email Account
<input type="checkbox" name="sys_acc" id="sys_acc" />System Account

<input type="radio" name="radio_email" value="create" class="email_group" id="radio_email_0" disabled="disabled"/>New
<input type="radio" name="radio_email" value="change" id="radio_email_1" disabled="disabled"/>Change
<input type="radio" name="radio_email" value="terminate" id="radio_email_2" disabled="disabled"\ />Termination

<input type="radio" name="radio_system" value="create" class="system_group" id="radio_system_0" disabled="disabled"/>New
<input type="radio" name="radio_system" value="change" id="radio_system_1" disabled="disabled" />Change
<input type="radio" name="radio_system" value="terminate" id="radio_system_2" disabled="disabled" />Termination

I donno what is the problem.It just doesn’t work.

Answer 1

There is no "enabled" attribute or property, just a "disabled" attribute or property which can be set to false to enable the element(s) in question. (The “attribute” is in your source html, but dynamic changes are made to the “property”, setting it to a boolean value to disable or not.)

Unless using an old version of jQuery, you should use the .prop() method to update this property. To enable the whole group of radio buttons you have to select them all by their name attribute (or give them a common class and select by that).

$("#email_acc").click(function() { 
    if ( this.checked ) {  
        $('input[name="radio_email"]').prop('disabled', false);
    }
});

// and the same for the other checkbox and group.

Note that your second checkbox has an id="sys_acc" but your JS is trying to select with "#system_acc" – you need to make sure they match.

If you need to disable the group again if the checkbox is unchecked then you can do the following, removing the if statement and setting the disabled property to the inverse of the checked property:

$('#email_acc').click(function() { 
    $('input[name="radio_email"]').prop('disabled', !this.checked);
});

// and again the same idea for the other checkbox and group.

Demo: http://jsfiddle.net/UqTB3/

Note that in both cases I’ve used this.checked instead of $(this).is(":checked"): I find the former easier to read, and it is more efficient to check the DOM element’s checked property directly than to create a jQuery object and use .is(":checked"). But if you’re really keen on using jQuery for everything you can make the appropriate substitution.