Question

所以我遇到了一些障碍。我有一个页面，我有一个复选框显示但被禁用（由于它是由DB驱动的，用户无法更改它的值）。在此复选框下方，我有一个自动填充字段。如果自动完成中的项目返回，我需要能够切换禁用复选框的值。但是，我现在无法这样做。

到目前为止，这是我的代码。

查看

...
<tr>
        <td class="adminTitle">
            @Html.NopLabelFor(model => model.IsSpecialOrder):
        </td>
        <td class="adminData">
            @Html.DisplayFor(model => model.IsSpecialOrder)
            @Html.HiddenFor(model => model.IsSpecialOrder)
        </td>
    </tr>
    <tr>
        <td class="adminTitle">
            @Html.NopLabelFor(model => model.ItemNumber):
        </td>
        <td class="adminData">
            @if (Model.Id > 0)
            {
                @Html.DisplayFor(model => model.ItemNumber)
            }
            else
            {
                @Html.EditorFor(model => model.ItemNumber)
            }
        </td>
    </tr>
...

<script type="text/javascript">
...
$("#ItemNumber").autocomplete({
            minLength: 2,
            source: function (request, response) {
                var itemNumber = $("#ItemNumber").val();
                //Get available Products based on search parameter and map data
                $.getJSON('@Url.Action("GetProductsByItemNumber", "PurchaseOrder")', { searchProduct: itemNumber }, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        productData.push({ 'Id': data[i].Id, 'Name': data[i].Name, 'ItemNumber': data[i].ItemNumber, 'Description': data[i].Description,
                            'IsSpecialOrder': data[i].IsSpecialOrder
                        });
                    }
                    response($.map(data, function (item) {
                        return {
                            value: item.ItemNumber,
                            id: item.Id
                        };
                    }));
                })
            },
            select: function (event, ui) {
                if (ui.item.id == 0) {
                    //Do some house cleaning and alert user to mistake
                    alert("You must retry your search for a Product");
                    $("#Name").val("");
                    $("#ItemNumber").val("");
                    $(".ProductDescription").html("");
                    document.getElementById("@Html.FieldIdFor(model => model.IsSpecialOrder)").checked = false;
                    //$("#IsSpecialOrder").prop("checked", false);

                    return false;
                }

                //Record ProductId
                $("#ProductId").val(ui.item.id);

                //Fill RequestorExt with correct data
                var description = GetData(productData, ui.item.id, "desc");
                var name = GetData(productData, ui.item.id, "name");
                var isSpecialOrder = GetData(productData, ui.item.id, "is");
                $(".ProductDescription").html(description);
                $("#Name").val(name);
                document.getElementById("@Html.FieldIdFor(model => model.IsSpecialOrder)").checked = isSpecialOrder;
                //$("#IsSpecialOrder").prop("checked", isSpecialOrder);
            }
        });
...
</script>

根据我一直在阅读的内容，如果不启用，则无法更改已禁用的字段。我猜这是解决这个问题的唯一方法，但我想先确定一下。有什么想法吗？

Answer 1

启用或禁用复选框无关紧要。您应该从复选框中删除checked属性，而不是将其checked属性设置为false，否则它将保持选中状态：

document.getElementById("@Html.FieldIdFor(model => model.IsSpecialOrder)").removeAttribute('checked');

示例：http://jsbin.com/izonur/2/edit

Answer 2

根据我一直在阅读的内容，禁用字段无法更改启用。我猜这是解决这个问题的唯一方法，但我想这样做先确定一下。有什么想法吗？

确定可以更改已禁用的字段see this fiddle。仔细检查您的js代码中是否具有正确的值。

供参考（与小提琴相同的代码）：

<input type="checkbox" disabled="disabled" checked="checked" id="chkbox"/>
<input type="button" value="Toggle" id="toggle"/>

var chkBox = $("#chkbox");
$("#toggle").click(function(){        
    if (chkBox.is(':checked')) {        
        chkBox.prop('checked', false);
    }
    else {        
        chkBox.prop('checked', true);
    }

});

Answer 3

表单http://www.w3.org/TR/html401/interact/forms.html#h-17.12

未提交已禁用的项目

您可以拥有与表单一致的只读项目（与您想要的完全相反）

我猜你是通过javascript以某种方式不正确地提交表单。您必须在提交时从表单中删除已禁用的项目，因此它将相应地起作用。

更改已禁用复选框的值

3 个答案: