Question

无论如何将@ HTML.Checkboxfor转换为切换html按钮？我参考了https://www.w3schools.com/howto/howto_css_switch.asp

中的切换按钮样式

目前正在使用：

@Html.CheckBoxFor(model => model.IsEnabled, new { @checked = "checked", @Name = "DelegateChkBox" })

更改为：

    <td class="slider-td">
         <label class="switch">
            <input name="DelegateChkBox" id="IsEnabled" type="checkbox" value="true" data-val-required="The IsEnabled field is required." data-val="true" data-bind="checked: IsEnabled">
          <div class="slider round"></div>
          </label>
   </td>

切换按钮仅在CHECKED检查时才起作用并回发到控制器：

否则默认情况下它不会回发到控制器UNCHECKED：

任何帮助将不胜感激！谢谢！

Answer 1

根据一些实验和调查结果，我发现你需要包含帮助者（int i = 0; while(i < 5) { i = ++i; System.out.print(i); }）生成的隐藏字段，如下面的样式所示：

Html.CheckBoxFor

查看使用示例（只需将<style type="text/css"> .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input {display:none;} .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; } /* include generated hidden field here */ input[type="checkbox"]:checked + input[type="hidden"] + .slider, input[type="checkbox"]:checked + .slider { background-color: #2196F3; } /* include generated hidden field here */ input[type="checkbox"]:focus + input[type="hidden"] + .slider, input[type="checkbox"]:focus + .slider { box-shadow: 0 0 1px #2196F3; } /* include generated hidden field here */ input[type="checkbox"]:checked + input[type="hidden"] + .slider:before, input[type="checkbox"]:checked + .slider:before { transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } </style>更改为<input type="checkbox" />）：

@Html.CheckBoxFor

为了确保在回发之前在客户端检查复选框，您可以使用下面的jQuery代码：

<label class="switch">
    @Html.CheckBoxFor(model => model.IsEnabled)
    <div class="slider round">
    </div>
</label>

演示示例：.NET Fiddle

参考文献：

Styling checkboxes in MVC 4

How can I apply a CSS style to Html.CheckBoxFor in MVC 5

@Html.checkboxfor - Get checkbox value using id

Answer 2

这很简单，我在我的项目中实现了。您只需要在HiddenFor中保留checkbox的值。

@Html.HiddenFor(model => model.IsEnabled, new{@id = "DelegateChkBox"})

然后在页面中显示切换按钮。例如，

 <td class="slider-td">
   <label class="switch">
    <input name="DelegateChkBox" id="IsEnabled" type="checkbox" value="true" 
      data-val-required="The IsEnabled field is required." data-val="true" 
      data-bind="checked: IsEnabled">
    <div class="slider round"></div>
   </label>
 </td>

现在，当用户选中/取消选中该复选框时，调用jquery方法并将值赋给@ Html.HiddenFor（..）。就是这样。

$('#IsEnabled').change(function(){
  if($(this).val()==true)
   {
    $('#DelegateChkBox').val(true);
   }
  else
   {
    $('#DelegateChkBox').val(false);
   }
})

请检查一次 if（$（“this”）。是（“：checked”））而不是 if（$（this）.val（）== true）< / strong>并相应地分配值。有点忙，无法检查我的代码：）

就是这样。现在，当您回发页面时，您已经将值设置为IsEnabled字段。

在Get方法中你必须这样做。您只需要检查HiddenFor（）的值并获取该值并将其分配给js的pageload事件中的HTML Toggle按钮。

$(function() { if($('#DelegateChkBox').val()== true) { $('#IsEnabled').prop("disabled", false); } else { $('#IsEnabled').prop("disabled", true); } });

就是这样。请相应更改HTML。

HTML.Checkboxfor切换按钮HTML？

2 个答案: