使用表單驗證破壞復選框jQuery

Question

我正在為四個字段編寫自定義驗證。 需要填寫一個。驗證有效，但是破壞了我的復選框。 運行jQuery單擊功能后，無法再檢查我的復選框。 復選框正在使用輸入。 我不確定我的jQuery在哪里有問題。 有人可以協助嗎？

下面的jQuery

 $('form').click(function (e) {
        if ($('#CoilWeightMIN').val() == '' && $('#CoilWeightMax').val() == '' && $('#IsCoilforCoil').prop('checked', false) && $('#IsStraightenandCut').prop('checked', false)) {
            //alert('Coil Weight must have a field filled in.');
            $("#coil span").text("Coil Weight must have a field filled in.");
            e.preventDefault(e);
        }
    });

    $('form').change(function () {

        if ($('#CoilWeightMIN').val() != "" || $('#CoilWeightMax').val() != "" || $('#IsCoilforCoil').prop('checked', true) || $('#IsStraightenandCut').prop('checked', true)) {
            //alert('Coil Weight must have a field filled in.');
            $("#coil span").text("");
        }
    });   

下面的HTML

 <div class="row">
            <div id="coil" class="col-sm-3">
                <div class="form-group">
                    <label asp-for="CoilWeightMIN" class="control-label"></label>
                    <input asp-for="CoilWeightMIN" class="form-control" />
                    <span asp-validation-for="CoilWeightMIN" class="text-danger"></span>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label asp-for="CoilWeightMax" class="control-label"></label>
                    <input asp-for="CoilWeightMax" class="form-control" />
                    <span asp-validation-for="CoilWeightMax" class="text-danger"></span>
                </div>
            </div>
            <div class="text-center col-sm-3">
                <label asp-for="IsCoilforCoil" class="control-label text-center"></label>
                <div class="form-group">
                    <div class="col-sm-3 col-lg-offset-5">
                        <input  asp-for="IsCoilforCoil" class="form-control" />
                    </div>
                </div>
            </div>
            <div class="text-center col-sm-3">
                <label asp-for="IsStraightenandCut" class="control-label text-center"></label>
                <div class="form-group">
                    <div class="col-sm-3 col-lg-offset-5">
                        <input asp-for="IsStraightenandCut" class="form-control" />
                    </div>
                </div>
            </div>

Answer 1

 $('#checkbox1').on('change', function(){ if($('#checkbox1').prop('checked', false)){ console.log('Wah wah, checkbox is always unchecked!'); } }); $('#checkbox2').on('change', function(){ if($('#checkbox2').is(':checked')){ console.log('Checkbox2 is checked!'); } else{ console.log('Checkbox2 is not checked :('); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="checkbox1" />Checkbox 1 <input type="checkbox" id="checkbox2" />Checkbox 2 

這是一個基於我對您的初始帖子的評論的示例。 如果您嘗試檢查Checkbox1，則將永遠不會對其進行檢查，因為if語句正在執行$('#checkbox1').prop('checked', false) ，該操作始終會將$('#checkbox1').prop('checked', false)設置為未選中。 在我的checkbox2更改函數中，我使用.is（'：checked'），您會看到可以單擊它並正確使用此復選框，並且得到正確的true / false。