将 CheckBoxFor 转换为 jQuery UI 按钮

Posted 2023-05-09

【中文标题】将 CheckBoxFor 转换为 jQuery UI 按钮

【英文标题】：convert CheckBoxFor to jQuery UI button

【发布时间】：2016-10-31 21:17:18

【问题描述】：

我在 MVC 应用程序中有一些复选框，我想转换为精美的 JQuery UI 按钮，详细信息如下：https://jqueryui.com/button/#checkbox

我的代码：

<td align="center">@html.CheckBoxFor(model => model.rJanVal)</td>

示例代码：

<input type="checkbox" id="check"><label for="check">Toggle</label>

我该怎么做？我对“（model => model.rJanVal）”这里发生的事情了解不够，所以我可以转换代码。 C# 和 MVC 的新手，这就是我挣扎的原因。

请帮忙:)

【问题讨论】：

复选框值是真还是假？请显示您的控制器端代码

【参考方案1】：

(model => model.rJanVal) 将导致生成属性 name 和 id 相对于您提供的属性（仅适用于生成输入、选择、文本区域...的 HTML 助手）。

对于labels，会生成属性for。

所以你的复选框应该有name="rJanVal" 和id="rJanVal"。

而label 将有for="rJanVal"。

因此，您可以像这样编写CSHTML 代码：

<td align="center">
    <div id="buttons>
        @Html.CheckBoxFor(model => model.rJanVal)
        @Html.LabelFor(model => model.rJanVal)
    </div>
</td>

还有JS：

$(function() 
    $("#rJanVal").button();
    $("#buttons").buttonset();
);

【参考方案2】：

为什么要转换它？只需像这样向剃刀复选框添加一个类：

@Html.CheckBoxFor(model => model.rJanVal, new  @class = "jqueryChkbox" )

然后在它上面调用jquery函数。

<script>
$(document).ready(function()
   $(".jqueryChkbox").button();
);
</script>

如果你想要一个按钮组：

<div id="jqueryChkboxGroup">
    @Html.CheckBoxFor(model => model.foo)
    @Html.CheckBoxFor(model => model.bar)

<div>

<script>
$(document).ready(function()
   $("#jqueryChkboxGroup").buttonset();
);
</script>