0

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

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

看法

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

从我一直在阅读的内容来看，如果不启用，就无法更改禁用的字段。我猜这是解决此问题的唯一方法，但想先确定一下。有任何想法吗？

4

3 回答 3

1

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

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

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

于 2013-04-04T14:59:34.190 回答
1

从我一直在阅读的内容来看，如果不启用，就无法更改禁用的字段。我猜这是解决此问题的唯一方法，但想先确定一下。有任何想法吗？

禁用的字段肯定可以更改，请参见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);
    }

});
于 2013-04-04T14:59:39.530 回答
1

禁用项目未通过表单提交http://www.w3.org/TR/html401/interact/forms.html#h-17.12

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

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

于 2013-04-04T15:09:17.167 回答