如果我选中 2 input radio，则禁用的提交按钮启用，但如果我取消选中它们......提交按钮不会禁用返回

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 方面的帮助，仅此而已。

请不要对我的代码改动太多！可以吗？

在此处查看 fiddle：https://jsfiddle.net/Suiberu/70tkgk5t/13/

谢谢！

Answer 1

尝试改用 .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

Answer 2

this.checked = false

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

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

$(this).change();

这将触发更改代码。

Answer 3

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

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 4

或者您可以将输入的类型更改为复选框，它会发挥神奇的作用。这是 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>

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

如果我选中 2 input radio，则禁用的提交按钮启用，但如果我取消选中它们......提交按钮不会禁用返回

If I check 2 input radio the disabled Submit button enables, but if I uncheck them...the Submit button doesn't disable back

javascript

forms

jquery

form-submit

radio-button