I want to add and remove class disabled on button click. I tried to add it using but var r is not assigned correctly to the div.

var r = $("div.radio.ui-buttonset");
        alert(r)
        if(r) {
            r.className += r.className ? ' disabled' : 'disabled';
        }

HTML

<div class="input radio optional ui-buttonset">
   radio buttons
</div>

Desired HTML result on click:

<div class="input radio optional ui-buttonset disabled">
   radio buttons
</div>

Desired HTML result another click: (back to original)

<div class="input radio optional ui-buttonset">
   radio buttons
</div>

I want to add and remove class disabled on button click. I tried to add it using but var r is not assigned correctly to the div.

var r = $("div.radio.ui-buttonset");
        alert(r)
        if(r) {
            r.className += r.className ? ' disabled' : 'disabled';
        }

HTML

<div class="input radio optional ui-buttonset">
   radio buttons
</div>

Desired HTML result on click:

<div class="input radio optional ui-buttonset disabled">
   radio buttons
</div>

Desired HTML result another click: (back to original)

<div class="input radio optional ui-buttonset">
   radio buttons
</div>

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited Aug 6, 2011 at 17:49 Immo asked Aug 6, 2011 at 17:44 ImmoImmo 60111 gold badge66 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

If you're using jQuery, just use ".removeClass()":

r.removeClass("disabled");

To add the class back, there's ".addClass()":

r.addClass("disabled");

edit — Given the markup you posted, the selector you're using to get the target <div> element should work fine. It's looking for a <div> that's got the two classes "radio" and "ui-buttonset", and according to the HTML you posted that's correct. If it's not working, you need to describe how exactly it's not working.

$('div.radio.ui-buttonset').toggleClass('disabled');

Good luck!