Question

所以，我想要将已选中和取消选中状态的复选框更改为单选按钮，表示是（已选中）或否（未选中）。

这是我为复选框所做的工作：

在我看来：

@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.....}

Answer 1

以下是经过测试的样本：

      <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>

Answer 2

您需要为属性渲染两个单选按钮，一个值为“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());
    }
  }
}

然后添加对web.config

的<namespaces>部分的引用

<add namespace="YourAssembly.Html "/>

并在视图中使用它

@Html.BooleanButtonsFor(m => m.YourBoolProperty)

如何将复选框更改为单选按钮？

2 个答案: