Question

我有3个相互依赖的下拉列表。

<div class="form-group">
            @Html.LabelFor(model => model.StatusId, "StatusId", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("StatusId", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.StatusId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group DeclineReasonId">
            @Html.LabelFor(model => model.DeclineReasonId, "DeclineReasonId", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("DeclineReasonId", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.DeclineReasonId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group PendingReasonsId">
            @Html.LabelFor(model => model.PendingReasonsId, "PendingReasonsId", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("PendingReasonsId", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.PendingReasonsId, "", new { @class = "text-danger" })
            </div>
        </div>

标签为StatusId的下拉列表中填充的值为＆＃34;待定＆＃34;，＆＃34;拒绝＆＃34;，＆＃34;已批准＆＃34;。如果我选择＆＃34;等待＆＃34;，＆＃34; DeclineReasonId＆＃34;应该被禁用。如果我选择＆＃34;拒绝＆＃34;，＆＃34; PendingReasonsId＆＃34;应该被禁用。如果我选择＆＃34;已批准＆＃34;，则应禁用DeclineReasonId和PendingReasonsId。

如果选择三者之一并在提交之前我决定更改StatusId，我希望它能够调整以便

如果我从Pending更改为Declined - 应该禁用PendingReasonsId并启用DeclineReasonId 如果我从Pending更改为Approved - PendingReasonsId和DeclineReasonsId应该被禁用

如果我从拒绝变为待定 - 应禁用DeclineReasonId并启用PendingReasonsId 如果我改变形式拒绝批准 - DeclineReasonId和PendingReasonsId都被禁用

如果我从Approved更改为Pending - 应启用PendingReasonsId并禁用DeclineReasonsId 如果我从Approved更改为Declined - 应启用DeclinedReasonId并将PendingReasonId保留为Disabled状态。

目前我已尝试过下面的代码，但它似乎并没有完美地运作

$(document).ready(function () {
        $("#StatusId").focusout(function () {
            //$("#PendingReasonsId").removeAttr("disabled");
            //$("#DeclineReasonId").hide("disabled", "disabled");

            var StatusValue = $("#StatusId").children("option").filter(":selected").text();
            //alert(StatusValue);
            if (StatusValue == "Declined") {
                $("#PendingReasonsId").attr("disabled","disabled");
            }
            else if (StatusValue == "Pending") {
                $("#DeclineReasonId").attr("disabled", "disabled");
            }
            else if (StatusValue == "Approved") {
                $("#PendingReasonsId").attr("disabled", "disabled");
                $("#DeclineReasonId").attr("disabled", "disabled");
            }

        })
        $("#StatusId").change(function () {
            var Value = $("#StatusId").children("option").filter(":selected").text()
            if(Value == "Pending")
            {
                $("#PendingReasonsId").removeAttr("disabled");
                $("#DeclineReasonId").attr("disabled", "disabled");
            }
            else if (Value == "Declined") {
                $("#DeclineReasonId").removeAttr("disabled");
                $("#PendingReasonsId").attr("disabled", "disabled");

            }
            else if (Value == "Approved") {
                $("#PendingReasonsId").attr("disabled", "disabled");
                $("#DeclineReasonId").attr("disabled", "disabled");
            }
        })
    })

Answer 1

如果我理解正确，以下代码应该适合您。更改事件首先会禁用“待处理原因”和“拒绝原因”下拉列表，然后根据所选状态启用其中一个（或两者都不会）。请注意，不需要.focusout功能。

var pending = $('#PendingReasonId'); // cache elements
var declined = $('#DeclinedReasonId');
declined.prop('disabled', true); // initial status is Pending so disable DeclinedReasons

// Handle the selected status
$('#StatusId').change(function () {
  var status = $("#StatusId").children("option").filter(":selected").text(); // get selected value
  // disable both
  pending.prop('disabled', true);
  declined.prop('disabled', true);
  if (status == 'Pending') {      
    pending.prop('disabled', false); // enable PendingReasons
  } else if (status == 'Declined') {    
    declined.prop('disabled', false); // enable DeclinedReasons
  }
});

旁注禁用控件意味着不会回发其值，因此您不应具有与[RequiredIf]和PendingReasonId属性关联的任何验证属性（DeclinedReasonId或类似的条件类型属性除外）。因此，您可以删除与这些属性相关联的@Html.ValidationMessageFor()。

如何根据所选下拉列表中的值启用和禁用表单控件

1 个答案: