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

条件：选择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>

如何提供/禁用提交按钮，仅在提供两个条件时：检查输入无线电和填充输入文本

1 个答案: