CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
Baked Inhalf
Baked Inhalf

Reputation: 3735

jQuery Mobile: Override disabled="disabled" style

Using jQM v 1.4.0 I've tried to override the grayed out style (<input type="text" disabled="disabled">) with:

input[type="text"]:disabled
{
    opacity: 1.0 !important;
    color: black !important;
}

But it's still greyed out and hardly visible. Any ideas?

Upvotes: 0

Views: 1901

Answers (4)

ezanker
ezanker

Reputation: 24738

jQuery Mobile enhances the input and creates a textinput widget which inserts the input into a div. When disabled the DIV is assigned the class ui-state-disabled, so you can override the opacity like this: 

.ui-state-disabled {
    opacity: 1.0;
}

DEMO

You can use the widget methods to enable/disable the input:

$("#btnEnable").on("click", function(){
    $("#myText").textinput("enable");
});

$("#btnDisable").on("click", function(){
    $("#myText").textinput("disable");
});

Upvotes: 3

naoxink
naoxink

Reputation: 597

You can use :disabled in your css:

http://jsfiddle.net/YT65W/

Edit: This way works with normal elements.. I misread sorry :/

I think this How to remove jQuery Mobile styling? will help you :)

Upvotes: 1

KittMedia
KittMedia

Reputation: 7466

You can simply use input[type="text"][disabled="disabled"] as selector.

Upvotes: 0

somebodysomewhere
somebodysomewhere

Reputation: 1156

Why don't remove the "disabled" attribute to make it usable?

$('input[type="text"]').removeAttr('disabled');

Upvotes: 0

Related Questions