0

所以，我想将我的复选框更改为选中和未选中状态的单选按钮，即是（选中）或否（未选中）。

这是我为复选框所做的：

在我看来： 

@Html.CheckBoxUi("PerpendicularCheckbox",@H.GetString("IsPerpendicular"), null, new { style = "margin-right:10px", @class = "type-style-paragraph" })

js：

$('input:checkbox[name=PerpendicularCheckbox]').on({
                "change": function () {
                    if (getUpdate()) {
                        var $this = $(this);
                        if (($this).is(':checked'))
                            $("ul li button").click();
                    }
                }
            });

            if (!Perpendicular) {                
                $("#PerpendicularCheckbox").prop("checked", false);
            }
            else {               
                $("#PerpendicularCheckbox").prop("checked", true);
            }

我想知道在 asp.net mvc 中使用 html 扩展名，我需要将它更改为单选按钮、是和否选项吗？

编辑：

我对单选按钮的松散尝试：

 @Html.RadioButtonForUi("PerpendicularCheckbox",@H.GetString("IsPerpendicular"), null, new { style = "margin-right:10px", @class = "type-style-paragraph" })



 $('input:radio[name=PerpendicularCheckbox]').on({
                    "change": function () {
                        if (getUpdate()) {
                            var $this = $(this);
                            if (($this).is(':checked'))
                                $("ul li button").click();
                        }
                    }
                });

RadioButtonForUi：

 public static MvcHtmlString RadioButtonForUi<TModel, TProperty>(
          this HtmlHelper<TModel> htmlHelper,
          Expression<Func<TModel, TProperty>> expression,
          string name,
          bool IsEnable,
          bool IsChecked,
          object onchange = null,
          string className = "",
          bool isRequreid = true

        ) {etc.....}
4

2 回答 2

0

您需要为该属性呈现两个单选按钮，一个具有“True”值，另一个具有“False”值，以便可以将所选值绑定到一个boolean值

您需要自定义 html 助手

namespace YourAssembly.Html
{
  public static class MyHelpers
  {
    public static MvcHtmlString BooleanButtonsFor<TModel>(this HtmlHelper<TModel> helper, Expression<Func<TModel, bool>> expression)
    {
      ModelMetadata metaData = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);
      string name = ExpressionHelper.GetExpressionText(expression);
      StringBuilder html = new StringBuilder();
      // Yes button
      string id = string.Format("{0}-yes", name);
      html.Append(helper.RadioButtonFor(expression, "True", new { id = id }));
      html.Append(helper.Label(id, "Yes"));
      // No button
      id = string.Format("{0}-no", name);
      html.Append(helper.RadioButtonFor(expression, "False", new { id = id }));
      html.Append(helper.Label(id, "No"));
      // enclode in a div for easier styling with css
      TagBuilder div = new TagBuilder("div");
      div.AddCssClass("radiobuttongroup");
      div.InnerHtml = html.ToString();
      return MvcHtmlString.Create(div.ToString());
    }
  }
}

<namespaces>然后添加对 web.config 部分的引用

<add namespace="YourAssembly.Html "/>

并在视图中使用它

@Html.BooleanButtonsFor(m => m.YourBoolProperty)
于 2015-02-10T03:26:26.960 回答
0

这是一个经过测试的样本：

      <div class="form-group">
        @Html.LabelFor(model => model.SaleOfPropertyPurchase, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.RadioButtonFor(model => model.SaleOfPropertyPurchase, true, new { id = "SaleOfPropertyPurchase-true" }) Yes
                @Html.RadioButtonFor(model => model.SaleOfPropertyPurchase, false, new { id = "SaleOfPropertyPurchase-false" }) No
                @Html.ValidationMessageFor(model => model.SaleOfPropertyPurchase, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

这是一些响应单选按钮单击的示例 jquery，并且还在表单上设置初始显示：

    @Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
    $(function () {
        $('#CurrentPropertyOwner-true').on('change', function () {
            $('#CurrentProperty').show();
        });
    });
    $(function () {
        $('#CurrentPropertyOwner-false').on('change', function () {
            $('#CurrentProperty').hide();
        });
    });

    $(document).ready(function () {
        var ischecked = $('#CurrentPropertyOwner-true').is(':checked')
        if (ischecked == true) {
            $('#CurrentProperty').show();
        }
        var ischecked = $('#CurrentPropertyOwner-false').is(':checked')
        if (ischecked == true) {
            $('#CurrentProperty').hide();
        }
    });
</script>
于 2015-02-09T19:24:12.787 回答