0

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>

dckuehn
  • 2,427
  • 3
  • 27
  • 37
BearSkyview
  • 385
  • 1
  • 8
  • 24
  • 1
    if you're using asp:checkbox, thats not the id, asp converts the ID into this massive string. i would use a class instead. – PlantTheIdea Mar 13 '13 at 20:30
  • @LifeInTheGrey Usually "ct100" or something similar is added as a prefix. But it's pretty unreliable, imo. – Johan Mar 13 '13 at 20:31
  • haha unreliable indeed, ive seen it do some crazy crazy stuff. either make it an html textbox and give it the `runat="server"` to make it work with ASP, or make it a class. – PlantTheIdea Mar 13 '13 at 20:33
  • I thought ClientIDMode='Static' kept the id the same...it's showing me the checkbox id='other' if I inspect the checkbox in browser. The name does get the added prefix. – BearSkyview Mar 13 '13 at 20:35
  • I've fiddled your code here: http://jsfiddle.net/pyQ2x/ -- Seems to be working in IE9 and Chrome... – tymeJV Mar 13 '13 at 20:59
  • @LifeInTheGrey That's only true if you're using containers, such as a repeater or master page... – Ian Mar 13 '13 at 21:09
  • @DouglasBubbletrousers Where is the checkbox with the id "other"? – Ian Mar 13 '13 at 21:10
  • @DouglasBubbletrousers What version of jQuery are you using and do you have the `.click()` method inside of a `$(document).ready(function () {});`? – Ian Mar 13 '13 at 21:11
  • It is inside $(document).ready. Looks like I'm using jquery-1.7.1. – BearSkyview Mar 13 '13 at 21:13
  • @DouglasBubbletrousers So where's the checkbox with the `id` of "other"? I see the checkbox with an `id` of "cbG", but that's not "other". – Ian Mar 13 '13 at 21:24
  • Oops. id='cbG' is actually id='other'. I was changing some variables around for posting purposes and forgot to change that one to other. – BearSkyview Mar 13 '13 at 21:29
  • @DouglasBubbletrousers Ahh okay. Well try this: `if (this.checked) {` instead of your first if statement, and then try `$(".restricted").prop("disabled", true);` instead of trying to set the property's value as "disabled". Not sure if it'll fix anything, but worth a shot - it's how I would've done it. Also, try putting `alert` or `console.log` statements inside the `if` and `else` blocks to see if the correct thing is at least being run. – Ian Mar 13 '13 at 21:41
  • I've tried all that. It's definitely hitting inside the if/else block. It's weird, usually IE is the fickle browser. – BearSkyview Mar 13 '13 at 22:06

2 Answers2

2
$('#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.

BearSkyview
  • 385
  • 1
  • 8
  • 24
-1

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"
tymeJV
  • 103,943
  • 14
  • 161
  • 157