如何 enable/disable 提交按钮，仅当提供两个条件时：检查输入单选框和填写输入文本

Question

我有这个表格：

<form name="myform" method="post">
  <input class="class_x" type="radio" name="name_1" value="value_1" id="id_1"/><br/>
  <input class="class_x" type="radio" name="name_2" value="value_2" id="id_2"/><br/>
  <input class="class_x" type="radio" name="name_3" value="value_3" id="id_3"/><br/>
  <input onkeyup="checkFormsValidity();" id="input_id" type="text" name="input_name" value="" required/><br/>
  <input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton"/>
</form>

三个输入单选框，一个输入文本，一个输入提交按钮。

根据 javascript 代码：

//ENABLE OR DISABLE SUBMIT BUTTON CODE ACCORDING TO INPUT RADIO
function checkIfValid() {
var current = $('input.class_x').filter(':checked');

  if (current.length > 1) {
    sbmtBtn.disabled = false;
  } else {
    sbmtBtn.disabled = true;
  }
};

//ENABLE OR DISABLE SUBMIT BUTTON CODE ACCORDING TO INPUT TEXT
checkFormsValidity = function(){
var myforms = document.forms["myform"];   
    if (myforms.checkValidity()) {
        sbmtBtn.disabled = false;
    } else {
        sbmtBtn.disabled = true;
    }
}

如果提供这两个条件中的任何一个，将启用输入提交按钮。但我需要的是输入 提交按钮仅在提供两个条件时启用 。并且如果这些条件中的任何一个被改回那么提交按钮应该再次禁用。

我知道这需要非常严格的语法。

根据我提供的代码，需要做哪些更改才能实现此目的？这是 JSFIDDLE https://jsfiddle.net/Suiberu/1n5gbooq/

谢谢！

Answer 1

试试这个： Updated fiddle

条件：select 和 2 radio button & one text input。

我删除了 html 中的 link keyup event，直接用 javascript 添加。无需单独验证 input text

//SUBMIT BUTTON VARIABLE DECLARED
var sbmtBtn = document.getElementById("SubmitButton");
sbmtBtn.disabled = true; 

//INPUTS RADIO; CHECK OR UNCHECK
var prv;
var markIt = function(e) {
  if (prv === this && this.checked) {
    this.checked = false;
    prv = null; 
  } else {
    prv = this;
  }
  checkIfValid();
};
$(function() {
  $('input.class_x').on('click', markIt);
   $('input[type=text]').on('keyup', markIt);
});

//ENABLE OR DISABLE SUBMIT BUTTON CODE ACCORDING TO INPUT RADIO
function checkIfValid() {
  var current = $('input.class_x').filter(':checked');
 if ((current.length > 1) && ($('input[type=text]').val() != "")) {
    sbmtBtn.disabled = false;
  } else {
    sbmtBtn.disabled = true;
  }
};

input[type='submit']:disabled{
 color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" method="post">
  <input class="class_x" type="radio" name="name_1" value="value_1" id="id_1"/><br/>
  <input class="class_x" type="radio" name="name_2" value="value_2" id="id_2"/><br/>
  <input class="class_x" type="radio" name="name_3" value="value_3" id="id_3"/><br/>
  <input id="input_id" type="text" name="input_name" value="" required/><br/>
  <input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton"/>
</form>

如何 enable/disable 提交按钮，仅当提供两个条件时：检查输入单选框和填写输入文本

how to enable/disable a submit button, only if two conditions are provided: checking input radio and filling input text

javascript

forms

jquery

form-submit

radio-button