javascript - 从禁用的复选框中发布值

Question

我知道禁用的输入不会向服务器发送值。此外，复选框不能具有只读属性。 我想获得“只读复选框”的功能，其中复选框被禁用，我可以在页面帖子上读取复选框的值。

以下代码类似于我需要在我的应用程序中执行的操作。单击第一个复选框 (RememberMe) 时，我选中第二个复选框 (Seriously) 并向其添加禁用属性。

这是模型:

public class LogOnModel
{
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [Display(Name = "Remember me?")]
    public bool RememberMe { get; set; }

    [Display(Name = "Seriously?")]
    public bool Seriously { get; set; }
}

这是我的看法:

@using (Html.BeginForm("", "", FormMethod.Post, new { id = "userForm" }))
{
<div>
    <fieldset>
        <legend>Account Information</legend>

        <div class="editor-label">
            @Html.LabelFor(m => m.UserName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.UserName)
            @Html.ValidationMessageFor(m => m.UserName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(m => m.Password)
        </div>
        <div class="editor-field">
            @Html.PasswordFor(m => m.Password)
            @Html.ValidationMessageFor(m => m.Password)
        </div>

        <div class="editor-label">
            @Html.CheckBoxFor(m => m.RememberMe)
            @Html.LabelFor(m => m.RememberMe)
        </div>

        <div class="editor-label">
            @Html.CheckBoxFor(m => m.Seriously)
            @Html.LabelFor(m => m.Seriously)
        </div>

        <p>
            <input type="button" value="Log On" onclick = "SubmitForm();"/>
        </p>
    </fieldset>
</div>
}

这是 View 中包含的我的 js 文件的精简内容:

function SubmitForm() {
    $.ajax({
        type: "POST",
        url: "/Account/LogOnAjax",
        cache: false,
        data: $("#userForm").serialize(),
        success: function (results) {
            showMessage(results);
        },
        error: 
            showMessage("error!");
        }
    });
}

function SeriouslyCheckEnable(value) {
    var SeriouslyCheckBox = $("input[name = 'Seriously']");
    if (value == "true") {
        SeriouslyCheckBox.attr('checked', 'checked');
        SeriouslyCheckBox.attr("disabled", "true");
    }
    else {
        SeriouslyCheckBox.removeAttr('checked');
        SeriouslyCheckBox.removeAttr('disabled');
    }
}

$(document).ready(function () {
    $("input[name='RememberMe']").click(function (e) { SeriouslyCheckEnable(($("input[name='RememberMe']:checked").val())); });
});

这是我正在调试的 Controller :

    public ActionResult LogOnAjax(LogOnModel model)
    {
        bool seriously = model.Seriously;
        bool remMe = model.RememberMe;

        return Json("some message here", JsonRequestBehavior.AllowGet);
    }

现在，无论 seriously 复选框的选中状态如何，对于 bool 变量 seriously，我总是得到 false。任何帮助将不胜感激。

Answer 1

如您所说，不会发布禁用值。如果您想将“禁用”值用于显示目的但发布隐藏值，那么您需要创建一个专门用于显示目的的附加属性。

模型

public class LogOnModel
{
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [Display(Name = "Remember me?")]
    public bool RememberMe { get; set; }

    public bool Seriously { get; set; }

    [Display(Name = "Seriously?")]
    public bool SeriouslyDisplay { get; set; }
}

HTML

<div class="editor-label">
    @Html.CheckBoxFor(m => m.SeriouslyDisplay)
    @Html.LabelFor(m => m.SeriouslyDisplay)
</div>

@Html.HiddenFor(m => m.Seriously)

JavaScript

function SeriouslyCheckEnable(value) {
  $('#Seriously').val(value);
  $('#SeriouslyDisplay').prop('checked', value);
  $('#SeriouslyDisplay').prop('disabled', value);
}

仅显示属性实际上不必在显示模型中，您只需要将它放在 HTML 中即可。为了便于阅读，我只是把它留在那里。

此外，我建议使用“checked”属性通过 javascript 切换复选框，如示例所示。它使使用和阅读变得更加简单!