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

How to Enable and Disable Form Controls based on values in selected dropdown list

本文关键字：启用 控件 表单 何根 下拉列表      更新时间：2023-09-26

我有 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 的值为"挂起"、"已拒绝"、"已批准"。如果我选择"待处理"，"拒绝原因ID"应该被禁用。如果我选择"拒绝"，"待定原因 ID"应该被禁用。如果我选择"已批准"，则应禁用拒绝原因 ID 和待定原因 ID。

如果在选择三者中的任何一个之后，在提交之前我决定更改 StatusId，我希望它能够进行调整，以便

如果我从"挂起"更改为"已拒绝" - 应禁用挂起的原因 ID 并启用"拒绝原因 Id如果我从"待处理"更改为"已批准" - 应禁用"挂起原因 ID 和拒绝原因 ID

如果我从"已拒绝"更改为"挂起" - 应禁用拒绝原因 ID 并启用挂起的原因 ID如果我将表单"拒绝"更改为"已批准" - "拒绝原因 ID"和"待处理原因 Id"都被禁用

如果我从"已批准"更改为"挂起" - 应启用挂起的原因 ID 并禁用拒绝原因 ID如果我从"已批准"更改为"已拒绝" - 应启用"拒绝原因 ID"，并将"挂起原因 Id"保留为"已禁用"状态。

目前我尝试了下面的代码，但它似乎不能完美地工作

$(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");
            }
        })
    })

如果我理解正确，以下代码应该适合您。更改事件首先禁用"待定原因"和"拒绝原因"下拉列表，然后根据所选状态启用其中一个（或两者都不启用）。注意 .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
  }
});

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

相关文章：