3

ブール値エディター用に記述された既定のチェックボックス テンプレートを取得しようとしましたが、MVC Razor が単一のブール値モデル プロパティに対して複数の入力要素をレンダリングする方法が原因で問題が発生しました。

このテンプレートを定義しました：

@model Boolean?
<div class="check-box">
    @Html.CheckBox("", Model.HasValue && Model.Value)
    @Html.LabelForWithoutText(m => m, new object())
</div>

HTML を次のように手動で書き出すと、次のようになります。

<div class="check-box">
    <input type="checkbox" title="Create?" value="true" name="check" id="chkCreate">
    <label title="Create?" for="chkCreate"></label>
</div>

すべて正常に動作します。

しかし、Razor がモデルのブール プロパティでテンプレートをレンダリングすると、html はかなり異なります。MVC がブール値をアクション メソッドに戻すために他の非表示の入力をレンダリングする方法が原因です。

Razor バージョンは次のようになります。

<div class="check-box">
    <input type="checkbox" value="true" name="GloballyShare" id="GloballyShare" data-val-required="The GloballyShare field is required." data-val="true">
    <input type="hidden" value="false" name="GloballyShare">
    <label title="GloballyShare" for="GloballyShare"></label>
</div>

問題は余分な hiddeninputです。MVC フォームがデフォルトでどのように動作するかにグローバルに影響するため、この動作を変更したくありません。CSS でこれを処理する方法が思い浮かびません。

だから私はこれがどのように達成されるのか疑問に思っています。ここで問題の実際の例を見ることができます:

MVC のデフォルトの CSS3 チェックボックス テンプレート

試してみると、非表示の入力要素を削除してもう一度試してみると、一番上のチェックボックスが一番下のチェックボックスと同じように機能し始めます

4

1 に答える 1

7

jsFiddle を修正できました。

ラベル セレクターを a から a に変更した+ところ~、両方のチェックボックスが機能するようになりました。

.check-box input[type=checkbox]:checked + label {

変更:

.check-box input[type=checkbox]:checked ~ label {

jsFiddle を修正

于 2013-08-21T22:25:59.903 に答える