disabled button seems enabled

Question

Using jboss 4.2.0 and deploying a Seam project war, I have a problem with html's commandButton disabled attribute.

The buttons seem enabled although their disabled attribute are set to true. The following three butons look al the same, but only "Back" button works as expected. The other other two looks enabled and when I click on them nothing happens.I couldn't figure out why they look enabled.

<h:commandButton value="Back" action="/bbaa.seam" />
<h:commandButton value="Edit"
                disabled="#{bbg.btnEditDisabled}"
                action="#{bbg.edit()}"
                rendered="#{bbg.btnEditRendered}" />
<h:commandButton value="Save"
                disabled="#{bbg.btnSaveDisabled}"
                action="#{bbg.save()}"
                rendered="#{bbg.btnSaveRendered}" />

This is what I see when I inspect the elements:

 <input type="submit" name="bbgForm:j_id609" value="Back">
    <input type="submit" name="bbgForm:j_id610" value="Edit"         disabled="disabled">
    <input type="submit" name="bbgForm:j_id611" value="Save" disabled="disabled">

Thanks in advance.

Answer 1

Modify this...

   <input type="submit" name="bbgFormid611" value="Save" disabled>

Use jquery

jQuery.fn.extend({
disable: function(state) {
    return this.each(function() {
        this.disabled = state;
    });
}});

Otherwis

Answer 2

you can use the css pseudoclass :disabled to change the appearance of 'disabled' elements ... like

input[type=submit]:disabled {
    background-color: #eee;
} 

note : IE does not support this in older versions (as far as i know <= 9).