1

In jQuery Mobile, following this answer, I have a button that is disabled with class "ui-disabled" . 

<input type="submit" class="ui-disabled" value="Register" onClick="rcRegister();" >

The question arises, how does one display the disabled state in JQuery Mobile by greying our the field?

I have tried to add this CSS but it has no effect.

input.ui-disabled {
    color: gray;
}

I am using jQuery Mobile 1.2.0 and jQuery 1.7.2 .

Community
  • 1
  • 1
ChrisGuest
  • 3,398
  • 4
  • 32
  • 53

1 Answers1

4

If you are talking about input fields then graying it out is not enough because you will still be able to change its content.

If you want to correctly disable jQuery Mobile input field you will need to do it through javascript, like this: http://jsfiddle.net/Gajotres/9UQ9k/

Javascript : 

$("#disable-me").textinput("disable");

As I said you will not be able to do it manually through css. But if you still want to do it partially manually then you need to change field opacity. Use this css:

.ui-disabled { 
    opacity: 0.3 !important;
}

Also take a look here, I have wrote an article describing how to enable/disable jQuery Mobile buttons.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Please note the field being disabled is a submit button ( `type="submit" `). It doesn't have text input. Using `class="ui-disabled"` works fine for disabling the button, but I am looking for a way to render this button so that it gives users a clue that it is disabled. I have tried various ways of applying css to class ui-disabled (including the one that you suggest) but I am not seeing these in my final form. – ChrisGuest May 06 '13 at 23:36