从禁用的复选框发布值

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

以下是视图中包含的我的 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())); });
});

这是我正在调试的控制器：

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

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

现在，无论认真复选框的选中状态如何，我总是认真地得到布尔变量的错误。任何帮助将不胜感激。

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 的复选框，如示例所示。它使使用和阅读变得更加简单！

Answer 2

我很想标记 user2395249 提供的答案，因为该答案让我朝着正确的方向前进。这就是我最终在 AJAX 帖子上获得正确值的方式：

型号：

我基本上添加了另一个名为 SeriouslyHidden 的属性。

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

public bool SeriouslyHidden { get; set; }

查看：

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

将我的 JavaScript 修改为以下内容：

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

    $("input[name='Seriously']").click(function (e) {
        SeriouslyCheck(($("input[name='Seriously']:checked").val()));
    });
});

function SeriouslyCheck(value) {
    $('#SeriouslyHidden').val(value);
    if (value == "true")
        $(SeriouslyCheckBox).attr('checked', 'checked');
    else
        $(SeriouslyCheckBox).removeAttr('checked');
}

function SeriouslyDisable(value) {
    if (value == "true")
        $(SeriouslyCheckBox).attr("disabled", "true");
    else
        $(SeriouslyCheckBox).removeAttr('disabled');
}

然后我在控制器中检索了值

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

    //do some processing here

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