Button label disappers after disable action

Question

This is a very weird problem am facing

HTML:

<input type="button" id="buttonobj" class="some class" value ="Button Name"/>

jQuery:

$(function(){

 $buttonObject = $('#buttonObj");
 $buttonObject.button('disable');

});

When I run this code and watch the HTML in firebug, am getting

<input type="button" id=buttonobj" class="some class" value =""/>

The value vanishes.

What does the disable do here. how can it change the value. Is it possible for a css to change a button value??

Am Using jQuery-ui

Answer 1

Finally found out the problem!

No one answered the question

What does the disable do here. how can it change the value. Is it possible for a css to change a button value??

The answer, it was a custom made jQuery Ui. On calling button.disable function, it is implicitly setting these two classes

ui-button-disabled ui-state-disabled

Thanks for all solution here, but I know all those ways of doing. Since it was a code which I was taking over from some one , I was not supposed to change but just find , Why it was not working while it was being integrated

Answer 2

There are a few mistakes in the code. Try this: (I fixed up some missing/wrong quotes, and changed the jquery "disable button" line to something I know works, as I'm not familiar with the code you used)

HTML:

<input type="button" id="buttonobj" class="class" value="Button Name" />

jQuery:

$(function(){
   $buttonObject = $("#buttonObj");
   $buttonObject.prop("disabled", true);
});

Answer 3

To change value of disable attribute, use following:

$(function(){

 $buttonObject = $("#buttonobj");
 $buttonObject.prop('disabled', true);
 alert($buttonObject.val());

});​

http://jsfiddle.net/mYz3b/1/

Answer 4

Two mistakes in the html, missing quote on id attrib and space between value and equals

So it should be:

<input type="button" id="buttonObj" class="some class" value=" Button Name"/>

For the jQuery:

$(function(){
    $buttonObject = $("#buttonObj");
    $buttonObject.attr("disabled", "disabled");
});

And use $buttonObject.removeAttr("disabled"); if you want to re-enable it.

Edit:

Also the id on the button and in the jQuery didn't match updated code.

Edit:

You could do the same thing with plain javascript:

function someFunc(){
    document.getElementById("buttonObj").disabled = "disabled";
}