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)，它始终将复选框设置为未选中。在我的checkbox2更改功能中，我使用.is（'：checked'），您将看到您可以单击它并正确使用复选框，并且您获得正确的真/假。

使用表单验证打破复选框jquery

1 个答案: