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 に答える