如何启用/禁用提交按钮，仅在提供两个条件的情况下：检查输入单选和填充输入文本

Posted 2023-05-09

【中文标题】如何启用/禁用提交按钮，仅在提供两个条件的情况下：检查输入单选和填充输入文本

【英文标题】：how to enable/disable a submit button, only if two conditions are provided: checking input radio and filling input text

【发布时间】：2017-03-19 01:57:00

【问题描述】：

我有这个表格：

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

谢谢！

【问题讨论】：

2 条件表示一个radio 按钮和一个text 字段。或者两个都只有radio 按钮

2 个条件意味着：两个单选按钮和一个文本。是的，所以基本上你不需要改变这两个功能，我希望

你确定收音机应该是这样的吗，给不同的名字会让使用收音机毫无意义。您也可以使用复选框，如果没有，请为单选框使用相同的名称。

检查小提琴。这两个功能分开工作，我需要的是他们一起工作。收音机应该是这样的，我不想要复选框，而且出于设计目的，它们不能使用相同的名称。

【参考方案1】：

试试这个： Updated fiddle

条件：用2 radio button & one text input选择。

我删除了直接使用 javascript 添加的 html 中的链接 keyup event。 无需单独验证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>