除非选中某个单选按钮，否则不要提交答案

【问题标题】：Don't submit unless a certain radio button is checked除非选中某个单选按钮，否则不要提交
【发布时间】：2014-11-22 15:05:15
【问题描述】：

我正在尝试制作一个 Jquery 简单函数，并且只想在单选按钮值为“1”时提交表单。如果不是，请不要提交表单并更改一些内容，如下面的代码所示。

目前，如果单选按钮的值为“1”或“0”，则表单无论如何都会提交。

<script>
$(document).ready(function() {
$('.result').hide();
$('input.prettycheckbox').prettyCheckable({});

$('input.submit').on('click', function(e) {
    e.preventDefault();
    $('input.prettycheckbox').each(function(){
        if ($(this).is(':checked') && $(this).is('input[value="0"]')) {
            $(this).attr("disabled", true);;
            $('.result').show();
            $('.advise').hide();
            $(this).parent().parent().addClass('incorrect');
        } else {
                $('form').submit();
            };
        });
    });
});
</script>

非常感谢！

【问题讨论】：

标签： jquery button onclick submit radio

【解决方案1】：

将事件附加到提交按钮绝不是一个好主意 - 而是使用表单的提交事件

$(function() {
  $('.result').hide();
  $('input.prettycheckbox').prettyCheckable({});

  $('form').on('submit', function(e) { // use #formid if you have it
      var ok = false;
      $('input.prettycheckbox').each(function(){
        if ($(this).is(':checked') && $(this).is('input[value="0"]')) {
            ok=true; // or other reason
            $(this).attr("disabled", true);;
            $('.result').show();
            $('.advise').hide();
            $(this).parent().parent().addClass('incorrect');
          } // seems to have been missing  
      });
      if (!ok) { // if not ok to submit, THEN preventDefault
         e.preventDefault();
      } 
    });
});

【讨论】：

我要睡觉了，所以我明天才能解决任何问题

【解决方案2】：

绑定表单以提交事件，然后使用

手动检查每个复选框

<script> 
$(document).ready(function() { $('.result').hide();
$('input.prettycheckbox').prettyCheckable({});

$('form.form_class').on('submit', function(e) {
    e.preventDefault();
    var chkbx = $('input.prettycheckbox');
    var ret = new Array(chkbx.length);

    for (var i = 0; i < chkbx.length; i++)
    {
        if ($(this).is(':checked') && $(this).is('input[value="0"]')) 
        {
            $(this).attr("disabled", true);;
            $('.result').show();
            $('.advise').hide();
            $(this).parent().parent().addClass('incorrect');
            return false;
            continue;
        }
    }
    return true
    }); 
}); 
</script>

【讨论】：

【解决方案3】：

为了简化；覆盖表单提交事件，并且仅在单选值不是 1 时才阻止。

HTML：

<form method="post" target="">
    <input type="radio" name="mandatory" value="0" />Selecting me won't work<br />
    <input type="radio" name="mandatory" value="1" />You must select me<br />
    <input type="submit" class="submit" value="Submit" />
<form>

jQuery:

$(document).ready(function () {

    $('form').on('submit', function (e) {
        if( $('input[name=mandatory]:checked').val()!= 1)
        {
            e.preventDefault();
        }            
    });

});

见fiddle

【讨论】：