비활성화 된 선택 요소에서 클라이언트 측 유효성 검사 활성화

비활성화 된 모든 양식 필드의 유효성을 검사하려는 경우 플러그인의 관련 행은 다음과 같습니다.

.not( ":submit, :reset, :image, :disabled" )

다음 단계를 따르십시오.

1. jquery.validate.js프로젝트에서를 찾습니다 .

2. js를 열고 ctrl+ F를 눌러이 줄에 disabled주석이 포함 된 줄을 찾습니다 (또는 :disabled이 줄에서 제거 할 수 있음 ).

3. 기본 asp.net 코어 프로젝트를 사용하는 경우 _ValidationScriptsPartial.cshtml.이 뷰에 대한 참조를 추가하기 때문에 jquery.validate.min.js변경해야합니다. jquery.validate.js(여전히 min.js를 사용하려면 문서 를 읽고 번들 방법을 알아보십시오. 정적 자산 축소) :

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> //change here...
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

다음은 작동하는 데모입니다.

모델 ( [Required]속성 추가 ) :

public class Test
{
    [Required]       //add this
    public string SelectableItem { get; set; }
}

보기 (제거 required="required") :

@model Test
<form method="post">
    <input type="checkbox" />
    <div class="col-12 mb-3">
        <select asp-for="SelectableItem" class="multi-select form-control" id="selectedItem" disabled="disabled">
            <option value="">-- Select Item --</option>
        </select>
        <span asp-validation-for="SelectableItem" class="text-danger"></span>
    </div>
    <input type="submit" value="Create" />
</form>

@section Scripts
{
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script>
        $(document).ready(function () {
            $('input:checkbox').change(function () {
                if (this.checked) {
                    //add to select list
                    $("#selectedItem").append($("<option></option>")
                        .attr("value", "1")
                        .text("aa"));
                    $("#selectedItem").append($("<option></option>")
                        .attr("value", "2")
                        .text("bb"));
                    $("#selectedItem").append($("<option></option>")
                        .attr("value", "3")
                        .text("cc"));
                    // $("selectedItem").prop('required', true);
                    $("#selectedItem").removeAttr('disabled');
                }
                else {
                    //remove item from select list
                    $("#selectedItem").empty().append($("<option></option>")
                        .attr("value", "")
                        .text("-- Select Item --"));
                    $("#selectedItem").prop('disabled', true);
                }
            });
        });
    </script>
} 

결과: