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

Question

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

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/

谢谢！

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

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

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

Answer 3

this.checked = false

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

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

$(this).change();

这将触发更改代码。

Answer 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