Different ways of disabling controls within a css class

Question

Can someone tell me all possible ways to disable all buttons in a class, I already tried this which isn't working,

$("input.myClass").attr('disabled', true);

This is how I am using it,

    <script type="text/javascript">
        $(document).ready(function() {

            var objA = $get('<%= checkbox.ClientID %>');

            $(objA).change(function() {

                if($(this).is(':checked'))
                {  
                    $(".anotherClass").sortable('disable'); //works
                    $("input.myClass").prop('disabled', 'disabled'); //doesn't work
                }

CSS is quiet simple,

.myClass
{
    float: left; 
    width: 140px; 
    margin-left: 4px; 
    margin-right: 4px; 
    padding-top: 20px;
    text-align: center;
}

HTML looks like this,

    <div class="myClass">
        <asp:Button ID="btn1" Text="bbb" runat="server" CausesValidation="False" CssClass="button" OnClientClick="return false;" />
        <asp:Button ID="btn2" Text="aaa" runat="server" CausesValidation="False" CssClass="button" OnClientClick="return false;" />
        <asp:Button ID="btn3" runat="server" CausesValidation="False" CssClass="button" OnClick="bt_Click" />
    </div>

It all depends on what you mean by "in a class". A number of interpretations are possible. — Beetroot-Beetroot, Mar 05 '13 at 10:57
*after seeing the HTML* .... as I suspected, "in a class" means "in a container selectable by class"! — Beetroot-Beetroot, Mar 05 '13 at 11:05
see this link http://stackoverflow.com/questions/3004885/attrdisabled-disabled-issue — शेखर, Mar 05 '13 at 11:05
The only `myClass` in sight is applied to the container, therefore `$(".myClass input").prop('disabled', true);` — Beetroot-Beetroot, Mar 05 '13 at 11:16
@Beetroot-Beetroot you was telling me right thing, but you missed ":" between class and input, thanks though :) — Mathematics, Mar 05 '13 at 12:00
Actually, it's hard to tell what ASP, bless it, actually serves. Maybe ` $(".myClass button").prop('disabled', true);` would be better. — Beetroot-Beetroot, Mar 05 '13 at 12:10
possible duplicate of [jquery disable by class](http://stackoverflow.com/questions/3458466/jquery-disable-by-class) — Jim G., May 21 '13 at 13:30

score 3 · Answer 1 · edited May 23 '17 at 12:08

jQuery 1.6+

To change the disabled property you should use the .prop() function.

$("input.myclass").prop('disabled', true);
$("input.myclass").prop('disabled', false);

jQuery 1.5 and below

The .prop() function doesn't exist, but .attr() does similar:

Set the disabled attribute.

$("input.myclass").attr('disabled','disabled');

To enable again

$("input.myclass").removeAttr('disabled');

Referred From : Stack Question

Aleksandr M · Answer 2 · 2013-03-05T12:02:26.680

1

Use .prop

$("input.myClass").prop("disabled", true);

If you want to disable all button type inputs inside div with myClass class:

$(".myClass input[type=button]").prop("disabled", true);

edited Mar 05 '13 at 12:02

answered Mar 05 '13 at 10:53

Aleksandr M

24,264
12
69
143

Could you create a jsFiddle of it? – Aleksandr M Mar 05 '13 at 10:55

dsgriffin · Answer 3 · 2013-03-05T11:13:14.980

1

If you want to use attr(), use this:

$("input.myClass").attr('disabled', 'disabled');

Or prop():

$("input.myClass").prop('disabled', true);

In regard to updated question:

Change your script tag to <script>
Place it towards the bottom of the page (not in the head section)

edited Mar 05 '13 at 11:13

answered Mar 05 '13 at 10:55

dsgriffin

66,495
17
137
137

score 1 · Answer 4 · edited May 23 '17 at 12:32

1

To disable

$('input.myClass').attr('disabled', 'disabled');

// To enable

$('input.myClass').removeAttr('disabled');

// OR you can set attr to ""

$('input.myClass').attr('disabled', '');

Some SO Links
jQuery disable/enable submit button
JQuery - Set Attribute value
.attr("disabled", "disabled") issue
Toggle input disabled attribute using jQuery

edited May 23 '17 at 12:32

Community

1
1

answered Mar 05 '13 at 10:57

शेखर

17,412
13
61
117

Matthias Wegtun · Answer 5 · 2013-03-05T11:29:00.323

1

since you asked all possible ways and the common ones are out there you can always prevent default by doing:

$('input.myClass').click(function(e){
    e.preventDefault();
})

preventing default, prevents from submitting a form for example.

edited Mar 05 '13 at 11:29

answered Mar 05 '13 at 11:02

Matthias Wegtun

1,231
1
9
13

score 1 · Answer 6 · answered Mar 05 '13 at 11:03

1

You can use $("input[type='button']").attr("disabled","disabled"); to disable all buttons.

answered Mar 05 '13 at 11:03

web2008

914
4
11

score 0 · Accepted Answer · answered Mar 05 '13 at 11:59

0

$(".myClass :input").attr('disabled', true);

is the only code that worked for me.

answered Mar 05 '13 at 11:59

Mathematics

7,314
25
77
152

Different ways of disabling controls within a css class

7 Answers7