jQuery disable all button of a css class

Question

I have n buttons. This button has the same name: setAlg.

I would disable all the buttons that has this name.

I have tried

$("input[name='setAlg']").attr("disabled",true);

but it doesn't work.

How I can do?

Thanks a lot.

Answer 1

Chris Pebbles suggestion should work fine, but I am confused. In your question's title, you specificall state "jQuery disable all button of a css class", however, you then provide an example which shows that you really want to disable all buttons that have a name attribute of setAlg.

Two points come to mind. First, your buttons, since they all have the same name may produce unexpected results for you when the user submits your form (if this is what they do, but I may be wrong here). If this is the case, the you probably really do want to set all of them to the same class, not name.

<input class="setAlg">...

Second point is that if you do want to make your jQuery to work with a class, you'll need to do:

$("input.setAlg").attr("disabled","disabled");

I hope this was helpful.

Answer 2

Make sure to wrap your code in ready handler:

$(function(){
  $("input[name='setAlg']").attr("disabled", true);
});

But If you are using the same class for those input fields (as per your question title), you need to try this instead:

$(function(){
  $("input.myclass").attr("disabled", true);
});

Where myclass is supposed to be the class name used for those input fields.

Answer 3

I think you forgot quotes

$("input[name='setAlg']").attr('disabled','true');

If this doesn't work then maybe your selection doesn't work

Answer 4

You can disable a button by using below mentioned steps.

Say your button class name = setAlg

Step 1:

Using Jquery attr Attribute :

$('.setAlg').attr('disabled', 'disabled');

Step 2:

Using Jquery addClass CSS Class :

$('.setAlg').addClass('disabled');

Step 3 :

Then by Declaring CSS Style Class :

 <style type="text/css">
        .disabled
        {
            background: none repeat scroll 0 0 burlyWood;
            cursor: default !important;
        }
  </style>