如何選擇選項選項用戶選中單選按鈕是和刪除所需如果選中否在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>

這是正常工作，但只有是的意思是當我檢查是否Vat Quarters設置為必要但當我再次檢查不是Vat Quarters仍然需要。 我只想要在選中是時需要。

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> 

Answer 2

required是一個布爾html屬性。 所以你必須使用prop 。

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

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

}

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

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

}

而且您必須在兩個無線電輸入的父節點上監聽click事件。

像這樣 ：

$('.input-group').click(function(){
    var value = $('#vatRegYes').prop('checked');

    if(value == true){

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

    }

    else if(value == false){

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

    }
});

正如Satpal所建議的那樣; 您也可以使用change事件。 兩種方法都有效。