ASP.NET MVC 使用 jQuery 删除模型必需属性

Question

我有一个模型，它都有一个[Required] 属性。 我也有一个带有选项的下拉菜单。选择不同的选项时，只会显示相关的输入字段。 但是当所有其他输入都被隐藏时，我也希望以某种方式禁用它们的必需属性。我正在为此尝试 jQuery。 这是我的 Razor 页面

<div id="Types" class="form-group">
                <label asp-for="Type" class="control-label"></label>
                <select asp-for="Type" class="form-control">
                    <option>Select a Type</option>
                    <option value="Book">Book</option>
                    <option value="AudioBook">AudioBook</option>
                    <option value="ReferenceBook">Reference Book</option>
                    <option value="DVD">DVD</option>
                </select>
<div id="ThePages" class="form-group">
                <label asp-for="Pages" class="control-label"></label>
                <input id="ThePages" asp-for="Pages" class="form-control" />
                <span asp-validation-for="Pages" class="text-danger"></span>
            </div>
            <div id="TheRunTime" class="form-group">
                <label asp-for="RunTimeMinutes" class="control-label"></label>
                <input id="TheRunTime" asp-for="RunTimeMinutes" class="form-control">
                <span asp-validation-for="RunTimeMinutes" class="text-danger"></span>
            </div>
            <div id="Borrowable" class="form-group form-check">
                <label class="form-check-label">
                    <input id="Borrowable" class="form-check-input" asp-for="IsBorrowable" /> @Html.DisplayNameFor(model => model.IsBorrowable)
                </label>
            </div>
            <div id="BorrowedBy" class="form-group">
                <label asp-for="Borrower" class="control-label"></label>
                <input id="BorrowedBy" asp-for="Borrower" class="form-control" />
                <span asp-validation-for="Borrower" class="text-danger"></span>
            </div>
            <div id="TheDate" class="form-group">
                <label asp-for="Date" class="control-label"></label>
                <input id="TheDate" asp-for="Date" class="form-control" />
                <span asp-validation-for="Date" class="text-danger"></span>
            </div>

这里是 jQuery 代码

function hideOnLoad() {
        $("#ThePages").hide();
        $("#TheRunTime").hide();
        $("#Borrowable").hide();
        $("#BorrowedBy").hide();
        $("#TheDate").hide();
    }

    $(document).ready(function () {
        hideOnLoad();
        $("#Types select").change(function () {
            var value = $(this).val();
            if (value == "Book") {
                $("#ThePages").show();
                $("#TheRunTime").hide().removeAttr();
                $("#Borrowable").show();
                $("#BorrowedBy").show();
                $("#TheDate").show();
            }
            else if (value == "AudioBook") {
                $("#ThePages").hide().removeAttr();
                $("#TheRunTime").show();
                $("#Borrowable").show();
                $("#BorrowedBy").show();
                $("#TheDate").show();
            }
            else if (value == "ReferenceBook") {
                $("#ThePages").show();
                $("#TheRunTime").hide().removeAttr();
                $("#Borrowable").hide().removeAttr();
                $("#BorrowedBy").hide().removeAttr();
                $("#TheDate").hide().removeAttr();
            }
            else if (value == "DVD") {
                $("#ThePages").hide().removeAttr();
                $("#TheRunTime").show();
                $("#Borrowable").show();
                $("#BorrowedBy").show();
                $("#TheDate").show();
            }
            else {
                hideOnLoad();
            }
        });
    });

所以我希望删除所有隐藏元素的属性。 我在这里错过了什么？

Answer 1

首先，您不能删除模型的[Required]，但您可以尝试客户端验证。 这是一个演示： 型号：

public class Model4
{
    public string Type { get; set; }
    public string Pages { get; set; }
    public string RunTimeMinutes { get; set; }
    public bool IsBorrowable { get; set; }
    public string Borrower { get; set; }
    public string Date { get; set; }


}

查看（Id 是唯一的，所以我删除了输入的 ID）：

<form method="post">
    <div id="Types" class="form-group">
        <label asp-for="Type" class="control-label"></label>
        <select asp-for="Type" class="form-control">
            <option>Select a Type</option>
            <option value="Book">Book</option>
            <option value="AudioBook">AudioBook</option>
            <option value="ReferenceBook">Reference Book</option>
            <option value="DVD">DVD</option>
        </select>
        <div id="ThePages" class="form-group">
            <label asp-for="Pages" class="control-label"></label>
            <input asp-for="Pages" class="form-control"/>
            <span asp-validation-for="Pages" class="text-danger"></span>
        </div>
        <div id="TheRunTime" class="form-group">
            <label asp-for="RunTimeMinutes" class="control-label"></label>
            <input asp-for="RunTimeMinutes" class="form-control">
            <span asp-validation-for="RunTimeMinutes" class="text-danger"></span>
        </div>
        <div id="Borrowable" class="form-group form-check">
            <label class="form-check-label">
                <input class="form-check-input" asp-for="IsBorrowable" /> @Html.DisplayNameFor(model => model.IsBorrowable)
            </label>
        </div>
        <div id="BorrowedBy" class="form-group">
            <label asp-for="Borrower" class="control-label"></label>
            <input asp-for="Borrower" class="form-control"/>
            <span asp-validation-for="Borrower" class="text-danger"></span>
        </div>
        <div id="TheDate" class="form-group">
            <label asp-for="Date" class="control-label"></label>
            <input asp-for="Date" class="form-control"/>
            <span asp-validation-for="Date" class="text-danger"></span>
        </div>
    </div>
    <input type="submit" value="submit">
</form>

js((IsBorrowable是bool类型，所以我不加required))：

function hideOnLoad() {
        $("#ThePages").hide();
        $("#TheRunTime").hide();
        $("#Borrowable").hide();
        $("#BorrowedBy").hide();
        $("#TheDate").hide();
    }
    function addRequired() {
        $("#Pages").attr("required", "required");
        $("#RunTimeMinutes").attr("required", "required");
        $("#Borrower").attr("required", "required");
        $("#Date").attr("required", "required");

    }
    $(document).ready(function () {
        hideOnLoad();
        $("#Types select").change(function () {
            addRequired();
            var value = $(this).val();
            if (value == "Book") {
                $("#ThePages").show();
                $("#TheRunTime").hide().removeAttr();
                $("#RunTimeMinutes").removeAttr("required");
                $("#Borrowable").show();
                $("#BorrowedBy").show();
                $("#TheDate").show();
            }
            else if (value == "AudioBook") {
                $("#ThePages").hide().removeAttr();
                $("#Pages").removeAttr("required");
                $("#TheRunTime").show();
                $("#Borrowable").show();
                $("#BorrowedBy").show();
                $("#TheDate").show();
            }
            else if (value == "ReferenceBook") {
                $("#ThePages").show();
                $("#TheRunTime").hide().removeAttr();
                $("#Borrowable").hide().removeAttr();
                $("#BorrowedBy").hide().removeAttr();
                $("#TheDate").hide().removeAttr();
                $("#RunTimeMinutes").removeAttr("required");
                $("#Borrower").removeAttr("required");
                $("#Date").removeAttr("required");
            }
            else if (value == "DVD") {
                $("#ThePages").hide().removeAttr();
                $("#Pages").removeAttr("required");
                $("#TheRunTime").show();
                $("#Borrowable").show();
                $("#BorrowedBy").show();
                $("#TheDate").show();
            }
            else {
                hideOnLoad();
                $("#Pages").removeAttr("required");
                $("#RunTimeMinutes").removeAttr("required");
                $("#Borrower").removeAttr("required");
                $("#Date").removeAttr("required");
            }
        });
    });

结果：