如果我检查 2 输入单选，则禁用的提交按钮会启用，但如果我取消选中它们...提交按钮不会重新禁用

Posted 2023-05-09

【中文标题】如果我检查 2 输入单选，则禁用的提交按钮会启用，但如果我取消选中它们...提交按钮不会重新禁用

【英文标题】：If I check 2 input radio the disabled Submit button enables, but if I uncheck them...the Submit button doesn't disable back

【发布时间】：2017-03-13 13:20:29

【问题描述】：

我只需要一些有关此代码的帮助。

var prv3;
var markIt3 = function(e) 
  if (prv3 === this && this.checked) 
    this.checked = false;
    prv3 = null; 
   else 
    prv3 = this;
       
;
$(function() 
  $('input.class_x').on('click', markIt3);
);

$('input[type=radio]').on('change', function() 

  var current = $('input.class_x').filter(':checked');
  var sbmtBtn = document.getElementById('SubmitButton');
  sbmtBtn.disabled = true;

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

我的要求如下： 任何人都可以修复缺少的内容，以便表单提交按钮返回应禁用状态，因为此表单仅在检查了 2 个输入类型单选时才启用它？

这种形式前面的描述是一切的主要思想：

一个表单，有几个输入类型的单选。检查至少 2 并且启用提交按钮。但是如果你取消选中其中任何一个，提交按钮应该禁用，但我无法实现这部分。 我只需要一点 IT 方面的帮助，别无其他。

请不要过多更改我的代码！可以吗？

在这里检查小提琴：https://jsfiddle.net/Suiberu/70tkgk5t/13/

谢谢！

【参考方案1】：

实际上的问题是取消选择未检测为更改的单选按钮。这个怎么样

var prv3;
var markIt3 = function(e) 
  if (prv3 === this && this.checked) 
    this.checked = false;
    prv3 = null; 
   else 
    prv3 = this;
  	
  checkIfValid();
;
$(function() 
  $('input.class_x').on('click', markIt3);
);

function checkIfValid() 
  var current = $('input.class_x').filter(':checked');
  var sbmtBtn = document.getElementById('SubmitButton');
  sbmtBtn.disabled = true;

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

input 
  display: block;
  margin: 0.5em 0;


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" autocomplete="off" method="post">
  <input class="class_x" type="radio" name="name_1" value="value_1" id="id_1" />
  <input class="class_x" type="radio" name="name_2" value="value_2" id="id_2" />
  <input class="class_x" type="radio" name="name_3" value="value_3" id="id_3" />
  <input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required/>
</form>

【讨论】：

感谢 axcl，如果有人想检查jsfiddle.net/Suiberu/70tkgk5t/32

，只需从您的代码中添加一个小提琴

【参考方案2】：

或者您可以将输入的类型更改为复选框，它会简单地发挥作用。 这是JSFiddle link。

 var prv3;
        var markIt3 = function (e) 
            if (prv3 === this && this.checked) 
                this.checked = false;
                prv3 = null;
             else 
                prv3 = this;
            
        ;
        $(function () 
            $('input.class_x').on('click', markIt3);
        );

    
        $('input[type=checkbox]').on('change', function () 
          
            var current = $('input.class_x').filter(':checked');
            var sbmtBtn = document.getElementById('SubmitButton');
            sbmtBtn.disabled=true;

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

   input 
  display: block;
  margin: 0.5em 0;


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" autocomplete="off" method="post">
       <input class="class_x" type="checkbox" name="name_1" value="value_1" id="id_1" />
  <input class="class_x" type="checkbox" name="name_2" value="value_2" id="id_2" />
  <input class="class_x" type="checkbox" name="name_3" value="value_3" id="id_3" />
        <input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required />
    </form>

只有类型已从单选按钮更改为复选框。

【讨论】：

但我需要单选按钮 ;(

很高兴你有答案:)

【参考方案3】：

this.checked = false

..不会触发更改事件，因此当取消选中单选按钮时不会触发更改代码。

在该行之后添加以下代码行：

$(this).change();

这将触发更改代码。

【参考方案4】：

尝试改用.prop() 函数

$('input[type=radio]').on('change', function() 
  var current = $('input.class_x').filter(':checked');

  var $sbmtBtn = $('#SubmitButton');
  $sbmtBtn.prop('disabled', true);

  if (current.length > 1) 
    $sbmtBtn.prop('disabled', false);
   else 
    $sbmtBtn.prop('disabled', true);
  
).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="radio" class="class_x">
  <input type="radio" class="class_x">
  <input id="SubmitButton" type="submit">
</form>

.prop() documentation