javascript - 如何要求选择选项用户选中单选按钮是，如果在提交表单之前在 jQuery 或 Javascript 中选中否，则需要删除

Question

我正在尝试在提交之前验证这一点，请帮助我。

我的 HTML

<div class="form-group">
  <label class="control-label col-md-3">VAT Register</label>
  <div class="col-md-6">
    <div class="input-group">
      <div class="icheck-inline">
        <label>
          <input type="radio" value="Yes" name="vat_register" id="vatRegYes" class="icheck">
          Yes </label>
        <label>
          <input type="radio" value="No" name="vat_register" id="vatRegNo" checked class="icheck">
          No </label>
      </div>
    </div>
  </div>
</div>
<div class="form-group">
  <label class="control-label col-md-3">VAT Number</label>
  <div class="col-md-6">
    <input type="text" name="vat_number"  class="form-control" />
  </div>
</div>
<div class="form-group">
  <label class="control-label col-md-3">VAT Quarters</label>
  <div class="col-md-6">
    <select name="vat_quarters" id="vatQuar" class="form-control select2me">
      <option value="">-- Choose --</option>
      <option value="Jan - April - July - October" >Jan - April - July - October</option>
      <option value="Feb - May - August - November" >Feb - May - August - November</option>
      <option value="March - June - September - December" >March - June - September - December</option>
    </select>
  </div>
</div>

我试过了

<script type="text/javascript">

        $(document).ready(function(){

            $('#vatRegYes').click(function(){

                if($(this).prop("checked") == true){

                    //alert("Checkbox is checked.");
                    $('#vatQuar').attr("required", "true");

                }

                else if($(this).prop("checked") == false){

                    //alert("Checkbox is unchecked.");
                    $('#vatQuar').removeAttr('required');​​​​​

                }

            });

        });

    </script>

这工作正常但仅适用于 Yes 意味着当我检查是 Vat Quarters set as required 但当我再次检查不是 Vat Quarters 仍然需要。我只希望在选中"is"时才需要。

Answer 1

由于 required 是一个属性，您应该使用 .prop()而不是 .attr() ，我建议使用 change 事件而不是 click 用于 radio 组，并且代码可以减少到以下。

好书 .prop() vs .attr()

 $(document).ready(function() {
   $('[name="vat_register"]').change(function() {
     $('#vatQuar').prop("required", $('#vatRegYes').prop("checked"));
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icheck-inline">
  <label>
    <input type="radio" value="Yes" name="vat_register" id="vatRegYes" class="icheck">Yes</label>
  <label>
    <input type="radio" value="No" name="vat_register" id="vatRegNo" checked class="icheck">No</label>
</div>
<div>
  <select name="vat_quarters" id="vatQuar" class="form-control select2me">
    <option value="">-- Choose --</option>
    <option value="Jan - April - July - October">Jan - April - July - October</option>
    <option value="Feb - May - August - November">Feb - May - August - November</option>
    <option value="March - June - September - December">March - June - September - December</option>
  </select>
</div>