8

It seems like some versions of the default android Browser have a rendering issue. If I create a page where I have some sort of input field and a button, when I disable the other input field, the button appears grayed out (unless this is done on page load, you have to click around / zoom for a bit to get the browser to re-render).

The interesting thing is, it does not apply the disabled STYLE to the button, but simply grays it out. Here is a sample.

Link to editor jsfiddle
Link to embedded 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);
});

Things to note:

  • The button is NOT disabled. Click on it and it temporarily gets un-grayed-out.
  • There is a style for the button's disabled state that sets its background color to red (if you disable the button, you will see this work), but the button does not appear red in the example, so it's not even just rendering the disabled style. It seems to mainly just set the opacity to a lower value
  • A button BEFORE the radio buttons will not be affected. http://jsfiddle.net/YVFVZ/4/

Any ideas how to work around this?

Improve this question
7
  • This is not an answer to your question, but ... firstly your HTML code is invalid! So browser behaviour is "unpredictable". Additionally to disable an input element, one need to set the "disabled" attribute in the HTML code. Furthermore it is unwise to use such values for the ID (and class) names. And the styles are never applied to the button because it is never disabled. If you "clean up & optimize" your code (HTML + CSS) I am quite sure that it will work as expected. Commented Mar 10, 2014 at 10:16
  • It may calm you, that the error is not present in my Android Browser 4.2.2 Commented Mar 13, 2014 at 12:23
  • @Netsurfer Please tell me, where do you think the HTML is not valid? Commented Mar 13, 2014 at 16:07
  • @HerrSerker Go and paste the code in validator.w3.org and you'll easily find out! As the OP did not say anything about the Doctype, one assumes the HTML5 Doctype nowadays. But anyway, there has never been a closing tag for input elements. The HTML5 Spec says:" Tag omission: The input element is a void element. An input element must have a start tag but must not have an end tag.". So the point is, that as long as the markup is invalid, browser behaviour is at least "unpredictable". Therefore it does not make any sense, to discuss a problem on invalid code! Commented Mar 13, 2014 at 16:23
  • @kir: you want that when we click on enable radio button then "Button" should be enabled and when we click on disable radio button then "Button" should be disabled, am I right ?? Commented Mar 14, 2014 at 8:01

3 Answers 3

Reset to default
6

I finally figured it out. I'm not really happy with this solution, but it seems to work.

If you wrap the inputs in a position: relative element, it fixes the problem.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Nice work, very weird but you just saved me hours of headaches. You should mark this as the answer, though a hack. A hack that works.
@ZainShaikh Yes - use valid HTML markup and the appropriate elements!
it doesn't work for me. I wrap my input div with position: relative; and nothing
0

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>

and also js as 

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

May be this could help.

Improve this answer

Comments

0

Let's clean up some of that HTML!

Have a fiddle - Fiddle Link!

  1. Put in some proper labels
  2. Remove the closing </input> tags which are invalid HTML. Let's self close them to make them pretty (even though this is not required unless you are using XHTML).
  3. Remove the <ul> which seems superfluous when we can use a little sprinkle of CSS to position your form elements.
  4. Rename those 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 enable the button when the enable radio button is clicked and disable when the disable radio button is clicked? Here:

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

Finally, the 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 :)

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.