Android 4.1.2 default browser - rendering problem with input fields disabled

Question

It seems that some versions of the Android browser by default have a rendering problem. If I create a page on which I have some input field and a button, when I turn off another input field, the button is grayed out (if this is not done when the page loads, you need to click / enlarge the image a bit to get the browser for reprocessing )

Interestingly, this does not apply to the disabled STYLE button, but simply unloads it. Here is an example.

Link to jsfiddle editor
Link to inline jsfiddle

CSS

ul { list-style-type:none; } .xxx { background: blue; color: white; } .xxx:disabled { background-color: red; } 

HTML:

 <div id="root"> <ul> <li> <input name="x" id="enable" class="x" type="radio">Enable</input> </li> <li> <input name="x" id="disable" class="x" type="radio">Disable</input> </li> </ul> <input type="button" class="xxx" value="Button"></input> </div> 

JS:

 $(function() { $('.x:eq(0)').prop('disabled', true); }); 

Notes:

• The button is NOT disabled. Click on it and it will not be temporarily grayed out.
• There is a style for the button disable state that sets the background color to red (if you disable the button, you will see this work), but the button does not look red in the example, so it does not even render a stylish style. It seems like basically just set the opacity to a lower value
• Button before the switches are touched. http://jsfiddle.net/YVFVZ/4/

Any ideas how to get around this?

Answer 1

I finally figured it out. I am not very happy with this solution, but it seems to work.

If you insert the inputs into the position: relative element, it fixes the problem.

Answer 2

Try using this DOM

<div id="root"> <ul> <li> <input name="x" id="enable" class="x" type="radio" />Enable </li> <li>
<input name="x" id="disable" class="x" type="radio" />Disable </li>
</ul> <input type="button" class="xxx" value="Button" /> </div>

as well as js like

 $(function() { $('.x:eq(0)').prop('disabled', 'disabled'); }); 

Perhaps this will help.

Answer 3

Let me clear some of this HTML!

There is a violin - Link to the script!

• Put some custom tags
• Remove the closing </input> that are not valid. Allow yourself to close them to make them beautiful (although this is not required if you are not using XHTML).
• Remove the <ul> which seems superfluous when we can sprinkle some CSS to fit your form elements.
• Rename these classes to something more relevant!

HTML

 <div id="root"> <input name="buttonState" id="enable" class="action" type="radio" /> <label for="enable">Enable</label> <input name="buttonState" id="disable" class="action" type="radio" /> <label for="disable">Disable</label> <input type="button" class="button" value="Button" /> </div> 

JQuery

So, you want to turn on the button when the power button is pressed and off when the power button is pressed? Here:

 $('#disable').click(function () { $('.button').attr('disabled', true); }); $('#enable').click(function () { $('.button').attr('disabled', false); }); 

Finally, CSS.

 .action { display: block; float: left; clear: left; margin: 0 10px; } label { display: block; margin: 10px 0; } .button { background: #00F; margin: 0 10px 10px 10px; } .button:disabled { background: #F00; } input, label { cursor: pointer; } 

Lovely :)