Disable button working on click

Question

$(document).ready(function() {
     $("#FieldsetID").each(function() {
                 $('.Isubmit').attr('disabled', 'disabled');
            });
});

the button showing as disabled but when I click on that its doign action?

is that something i am doing wrong?

thanks

Answer 1

I don't think you can run an .each() function on a unique element. It's unique because you are using an #id selector.

You just need to do this:

$(document).ready(function() {
     $('#FieldsetID .Isubmit').attr('disabled', 'disabled');
});

Now the buttons shouldn't be clickable.

Answer 2

Altough untested, i think when you are selecting elements by id, you don't need to use each as it returns one element, and when you are selecting using class you have to use each, try using each on disabling selector and see.

Answer 3

For some reason, IE doesn't prevent the event from bubbling when you click a disabled submit button.

I assume you have some other event handler on an ancestor that is therefore being triggered.

In that ancestor's event handler, it looks like you'll need to test to see if the submit button was clicked and if it is disabled. If so, you'll return false; to prevent the code from running, or the submit from occurring, or whatever.

       // Not sure if this is the right event, but you get the idea
$( someSelector ).click(function( event ) {
    var $target  = $(event.target);
                  // check to see if the submit was clicked
                  //    and if it is disabled, and if so,
                  //    return false
    if( $target.is(':submit:disabled') ) {
        return false;
    }
});