如何启用/禁用提交按钮，仅当提供两个条件时:检查输入单选和填充输入文本

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

本文关键字：输入 条件 两个 检查 文本 单选 填充 启用 何启用 提交 按钮      更新时间：2023-09-26

我有这样一个表单:

<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/

谢谢!

试试这个:更新小提琴

条件:select with 2 radio button & one text input .

我删除链接keyup event在html中添加直接与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>

相关文章：