.prop, .attr not working when trying to disable asp:CheckBox

Question

I have a bunch of asp:checkboxs. Most of them have a class of "restricted" and all of them have clientIdMode='static'. I have a separate checkbox with id='other'. When this box is clicked, I want the boxes with class='restricted' to be disabled. Problem is I can't get it to work in Firefox or Chrome. I've found a bunch of related questions on the net but no real answers.

$('#other').click(function() {
    if ($(this).is(":checked")) {
        $(".restricted").prop("disabled", "disabled");
    }
    else {
        $(".restricted").prop("disabled", false);
    }
});

I've tried using combinations of .prop, .attr, ("disabled", true), and ("disabled", "disabled") but I can't get it to work outside IE.

EDIT: Here is some html as well:

<fieldset>
    <legend>Accessories</legend>
    <ol>
        <li>
            <asp:CheckBox ID="cb1" runat="server" ClientIDMode="Static" CssClass="restricted" />
            <label for="cb1">VAL 1</label>
        </li>
        <li>
            <asp:CheckBox ID="cbP2" runat="server" ClientIDMode="Static" CssClass="restricted" />
            <label for="cb2">VAL 2</label>
        </li>
        <li>
            <asp:CheckBox ID="cb3" runat="server" ClientIDMode="Static" CssClass="restricted" />
            <label for="cbPickupInside">VAL 3</label>
        </li>
        <li>
            <asp:CheckBox ID="cb4" runat="server" ClientIDMode="Static" CssClass="restricted" />
            <label for="cb4">Value 4</label>
        </li>
    </ol>
</fieldset>

And the checkbox that when clicked should disable the other:

<fieldset>
<ol>
    <li>
        <asp:CheckBox ID="cbG" runat="server" ClientIDMode="Static" />
        <label for="cbG">VAL G</label>
    </li>

Answer 1

$('#other').click(function() {
        if ($(this).is(":checked")) {
            $(".restricted input").prop("disabled", "disabled");
        }
        else {
            $(".restricted input").prop("disabled", false);
        }
    });

I fixed it by adding the input selector after the class selector. The span around the input is what actually had the class, so I guess IE finds the span and runs the code against the input. Chrome and Firefox must stop at the span.

Answer 2

If this is an asp checkbox, target like so:

$("#<%=other.ClientID %>").click(function() {
    //code here
});

Change your checkbox class from

CssClass="restricted"

To

class="restricted"