10

ここで詳しく説明されているような手法を使用して、ASP.NET MVC サイトのチェックボックスのルック アンド フィールをカスタマイズしようとしています: http://cssdeck.com/labs/css-checkbox-styles

フォームに配置する場合を除いて、それらはうまく機能します。@Html.CheckBoxFor() メソッドを使用する場合、MVC は非表示のチェックボックスを追加します。これは、チェックボックスがチェックされていないときに値がフォーム POST に送信されるようにするためのようです: asp.net mvc: why is Html.CheckBox generated an追加の隠し入力

余分な非表示のチェックボックスがフォーム上にある場合、カスタム チェックボックスが機能しません。クリックしましたが、状態が切り替わりません。余分な隠しチェックボックスを削除すると機能しますが、POST の送信で問題が発生すると思います。

最終的なhtmlは次のとおりです。

<div class="kbcheckbox">
    <input checked="checked" data-val="true" data-val-required="The Approved field is required." id="UserEdit_IsApproved" name="UserEdit.IsApproved" type="checkbox" value="true">
    <input name="UserEdit.IsApproved" type="hidden" value="false">
    <label for="UserEdit_IsApproved"></label></div>
</div>

そして、これが私が使用しているcssです（scssを使用）

.kbcheckbox {
    width: $checkbox_size;  
    height: $checkbox_size;
    position: relative;

    input[type="checkbox"]{
        visibility: hidden;
    }

    label {
        cursor: pointer;
        position: absolute;
        width: $checkbox_size;
        height: $checkbox_size;
        top: 0;
        left: 0;
        border-radius: $control_corner_radius;
        border: 1px solid $control_border_color;
        /*@include box-shadow(1px, 1px, 1px, 0, $control_border_color, inset);*/ 
        /*@include box-shadow(0px, 1px, 0px, $control_background);*/
        background: white;
    }

    label:after {
        opacity: 0;
        content: '';
        position: absolute;
        width: $checkbox_size * 0.62;
        height: $checkbox_size * 0.25;
        background: transparent;
        top: $checkbox_size * 0.2;
        left: $checkbox_size * 0.1;
        border: 3px solid black;
        border-top: none;
        border-right: none;

        @include transform(rotate(-45deg));
    } 

    label:hover {
        background: darken($control_background, 10%);
    }

    input[type=checkbox]:checked + label:after {
        opacity: 1;
    }
}

何か案は？

4

3 に答える 3

2

css で次を使用します。すべての要素を変更したい。

input[type = checkbox]:checked ~ label:after {
    opacity: 1;
}

ここにフィドルがあります

于 2015-01-28T23:29:04.507 に答える
1

この問題は、チェックボックスがチェックされたときに MVC 隠しフィールドの値を変更するためにイベントを接続することで解決できます。MVC ヘルパーを使用せずに基本的に同じことを行います。

@Html.HiddenFor(model => model.UserEdit.IsApproved, new { @id = "chkIsApproved" })

ここにあなたのHTMLがあります

<div class="kbcheckbox">
    <input checked="checked" data-val="true" data-val-required="The Approved field is required." id="UserEdit_IsApproved" name="UserEdit.IsApproved" type="checkbox" value="true">
    <label for="UserEdit_IsApproved"></label></div>
</div>

次に、いくつかのjQueryを使用して、チェックされたプロパティを非表示フィールドに結び付けます

$('#UserEdit_IsApproved').change(function() {
    $('#chkIsApproved').val($(this).is(':checked'));        
});

MVC 隠しフィールドがどこかにある限り、値はコントローラーにポストされます。少し余分な作業ですが、必要な結果が得られるはずです。

于 2014-08-13T15:34:49.230 に答える