8

似乎某些版本的默认 android 浏览器存在渲染问题。如果我创建一个页面，其中有某种输入字段和一个按钮，当我禁用另一个输入字段时，该按钮显示为灰色（除非这是在页面加载时完成的，否则您必须单击/缩放一点以让浏览器重新渲染）。

有趣的是，它不会将禁用的 STYLE 应用到按钮，而只是将其变灰。这是一个示例。

链接到编辑器 jsfiddle
链接到嵌入式 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);
});

注意事项：

  • 该按钮未被禁用。单击它，它会暂时变灰。
  • 按钮的禁用状态有一种样式，将其背景颜色设置为红色（如果禁用按钮，您将看到此工作），但在示例中按钮不会显示为红色，因此它甚至不只是呈现禁用样式. 似乎主要只是将不透明度设置为较低的值
  • 单选按钮之前的按钮不会受到影响。http://jsfiddle.net/YVFVZ/4/

任何想法如何解决这个问题？

4

3 回答 3

6

我终于弄明白了。我对这个解决方案并不满意，但它似乎有效。

如果将输入包装在一个position: relative元素中，它可以解决问题。

于 2012-12-13T14:08:05.950 回答
0

让我们清理一些 HTML！

有一个小提琴 -小提琴链接！

  1. 贴上一些适当的标签
  2. 删除无效 HTML的结束</input>标记。让我们自行关闭它们以使它们漂亮（尽管这不是必需的，除非您使用 XHTML）。
  3. <ul>当我们可以使用一点 CSS 来定位表单元素时，删除那些看起来是多余的。
  4. 将这些类重命名为更相关的东西！

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

所以你想在单击启用单选按钮时启用按钮并在单击禁用单选按钮时禁用？这里：

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

最后，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;
}

迷人的 ：）

于 2014-03-15T07:27:04.690 回答
0

尝试使用这个 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>

还有 js 作为

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

可能这会有所帮助。

于 2014-03-14T12:45:00.047 回答