表单提交验证

Question

我正在尝试实现：看来我的if语句对于输入文本字段是错误的。

1. 有2个父类的班级（父级和图形收音机）
2. 在父级分区中，有2个子父级。 1个带收音机，1个带输入文本。
3. 我应该只选择一个单选按钮，不能同时选择div的两个单选按钮。

4. 如果他们从第一个父级div中选择了单选按钮，则必须至少在任何一个输入文本框中键入内容。

5. 如果他们选择了第二个父单选框，则“提交”按钮以及最后一个输入文本框应该是可单击/可编辑的。

6. 如果他们选择了第一个父级单选按钮以及在任何一个文本字段中键入的任何文本，则再次单击“提交”按钮以及最后输入的文本框。
7. 如果未选择任何内容，则带有“提交”按钮的最后一个输入文本应保持无效状态

var init_txt = $(".init-one-text");
var init_radio_btn = document.querySelector('input[name="radios-init"]:checked') != null ? document.querySelector('input[name="radios-init"]:checked').value : "";
var graph_radio_btn = document.querySelector('input[name="graph-init"]:checked') != null ? document.querySelector('input[name="graph-init"]:checked').value : "";

if ((init_radio_btn != '' && init_txt.length > 1) || graph_radio_btn != '') {

  $('.add-to-bag-section input[type=text], .add-to-bag-section input[type=submit]').attr('readonly', false);
  $('.add-to-bag-section input[type=text], .add-to-bag-section input[type=submit]').attr('disabled', false);

} else {
  $('.add-to-bag-section input[type=text], .add-to-bag-section input[type=submit]').attr('readonly', true);
  $('.add-to-bag-section input[type=text], .add-to-bag-section input[type=submit]').attr('disabled', true);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">

  <!--Parent 1 Radio start-->
  <div class="init-radio-parent">
    <input type="radio" name="radios-init">
    <label for="radios-init">One</label>
    <input type="radio" name="radios-init">
    <label for="radios-init">two</label>
    <input type="radio" name="radios-init">
    <label for="radios-init">three</label>
  </div>
  <!--Parent 1 Radio end-->

  <!--Parent 1 text input start-->
  <div class="text-field-init">
    <input type="text" id="init-one-id" class="init-one-text" name="init-one-text" maxlength="1/">
    <input type="text" id="init-two-id" class="init-one-text" name="init-one-text" maxlength="1/">
    <input type="text" id="init-three-id" class="init-one-text" name="init-one-text" maxlength="1/">
    <i class="fa fa-info-circle" aria-hidden="true"></i>
  </div>
  <!--Parent 1 text input end-->

</div>

<br><br>

<!--Parent 2 text radio start-->
<div class="graph-radio">
  <input type="radio" name="graph-init">
  <label for="graph-init">GOne</label>
  <input type="radio" name="graph-init">
  <label for="graph-init">GTwo</label>
</div>
<!--Parent 2 text radio end-->

<br><br>

<div class="add-to-bag-section">
  <input type="text">
  <input type="submit">
</div>

Answer 1

您可以检查以下代码。希望对您有帮助

 $(document).ready(function(){
        $(".graph-radio-btn").click(function(){
        if($(this).prop("checked")==true){
        $(".add_to_bag_input,.btn").removeAttr("disabled");
        $(".graph-radio-input").removeAttr("checked");
        }else{
        $(".add_to_bag_input,.btn").attr("disabled","disabled");
        }

        });
        $(".graph-radio-input").click(function(){
        if($(this).prop("checked")==true){
        $(".add_to_bag_input,.btn").removeAttr("disabled");
        $(".graph-radio-btn").removeAttr("checked");
        }else{
        $(".add_to_bag_input,.btn").attr("disabled","disabled");
        }
        });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div class="parent">

          <!--Parent 1 Radio start-->
          <div class="init-radio-parent">
            <input type="radio" name="radios-init" class="graph-radio-btn">
            <label for="radios-init">One</label>
            <input type="radio" name="radios-init" class="graph-radio-btn">
            <label for="radios-init">two</label>
            <input type="radio" name="radios-init" class="graph-radio-btn">
            <label for="radios-init">three</label>
          </div>
          <!--Parent 1 Radio end-->

          <!--Parent 1 text input start-->
          <div class="text-field-init">
            <input type="text" id="init-one-id" class="init-one-text" name="init-one-text" maxlength="1/">
            <input type="text" id="init-two-id" class="init-one-text" name="init-one-text" maxlength="1/">
            <input type="text" id="init-three-id" class="init-one-text" name="init-one-text" maxlength="1/">
            <i class="fa fa-info-circle" aria-hidden="true"></i>
          </div>
          <!--Parent 1 text input end-->

        </div>

        <br><br>

        <!--Parent 2 text radio start-->
        <div class="graph-radio">
          <input type="radio" name="graph-init" class="graph-radio-input">
          <label for="graph-init">GOne</label>
          <input type="radio" name="graph-init" class="graph-radio-input">
          <label for="graph-init">GTwo</label>
        </div>
        <!--Parent 2 text radio end-->

        <br><br>

        <div class="add-to-bag-section">
          <input type="text" class="add_to_bag_input" disabled>
          <input type="submit" class="btn" disabled>
        </div>

    

<!-- end snippet -->

Answer 2

我觉得你应该自己验证一下。

编写单独的功能以启用类似按钮

 function enableSubmit() {
      $('#submitbutton').prop('disabled',false)
} 

然后读取onchange值，并使逻辑类似

$(document).onchange(function(){ 
var radio1=$('#radio1_id');
var radio2=$('#radio2_id');
var text1=$('#text1_id');
var text2=$('#text2_id');
  if(radio1 && !radio2){
         if(text1!=''){
              enableSubmit();
         }else{
              disableSubmit();
         }
  } 
  else if(radio2 && !radio1){
             disableSubmit();
  } 
});

如果可以应用所有条件，则可以使用嵌套