disable <button> with jQuery Mobile causes frame

Question

i am using jquery 2.0 with jquery mobile 1.4.

if i disable a there is a Frame around the Button. It's still there if i enable the button again.

$("#speichern").button({disabled:true});  

button tag:

<button id="artSave" class="ui-btn ui-icon-plus ui-btn-icon-left ui-corner-all ui-btn-b"> speichern</button>

i don't like to use an anchor, because it can't disable the button fully. i also had some drawbacks with

picture of frame around the button

thanks a lot

Answer 1

To disable a button or a tags, add class ui-state-disabled. Use .button() widget only with input that has type button, submit or reset.

When you use .button() on any element other than input, you convert it into an input button and hence you get a wrapper around it.

• Disable/Enable an input button:

  $(".selector").button("disable");
  $(".selector").button("enable");
  

• Disable/Enable button tag:

  $(".selector").addClass("ui-state-disabled");
  $(".selector").removeClass("ui-state-disabled");
  

• Disable/Enable a anchor tag:

  $(".selector").addClass("ui-state-disabled");
  $(".selector").removeClass("ui-state-disabled");
  

Demo