Question

<input type="radio" id="Svar0" name="Svar" value="Yes"> 
<input type="radio" id="Svar1" name="Svar" value="No"> 
<input type="radio" id="Svar2" name="Svar" value="MayBe">

用户只能选择一次。

根据要求，如果用户选择了收音机，则他无法选择另一个收音机。意味着如果用户已回答“是”（单击“是”），则他无法将答案更改为“否”或“MayBe”。

解决方法：

如果我在单击后禁用收音机，则不会将其提交给服务器。
readonly没有选项。

我试过onchange handler返回false，但它会让用户回答消失。

<script> 
$('input[type = "radio"]').change(function () {
    this.checked = false;
});
</script>

我正在考虑像单选按钮之前的透明div这样奇怪的选项。

我不想偏爱隐藏字段，因为我有60多个问题而且我发现很难管理它们。

请帮助我使用Jquery或Javascript中的任何代码。

如果用户在广播中选择一个答案，那么该页面不应允许他选择另一个答案，因此第一个选择的答案应该是提交的答案。

Answer 1

试

$("[type=radio][name=Svar]").change(function () {

    if (!$("[type=radio][name=Svar]").filter("[clicked]").length) {
        $(this).attr("clicked", "true")
    } else {
        $(this).prop("checked", !this.checked);
        $("[type=radio][name=Svar]").filter("[clicked]").prop("checked", true)
    }


});

<强> DEMO

使用preventDefault()点击事件 @JotaBe 表示

$("[type=radio][name=Svar]").click(function (e) {
    if (!$("[type=radio][name=Svar]").filter("[clicked]").length) {
        $(this).attr("clicked", "true")
    } else {
        e.preventDefault(); 
    }

});

<强> DEMO

Answer 2

另一个简单的选项（禁用所有，除了选择，选择任何选项）。这允许回发所选值：

$(':radio').change(function(){
    $(':radio').not(this).prop("disabled", true);
});

JSFiddle： http://jsfiddle.net/9n8v4heo/

更新（禁用前延迟）：

似乎没有良好的用户体验允许无线电选择，然后立即冻结，因为错误确实发生。

以下示例允许在任何选择之后延迟2秒，然后禁用它们，这样您可以继续点击，但在两秒钟之后您无法再次选择：

var tme;
$(':radio').change(function(){
    var t = this;
    clearTimeout(tme);
    tme = setTimeout(function(){
        $(':radio').not(t).prop("disabled", true);
    }, 2000);
});

JSFiddle： http://jsfiddle.net/9n8v4heo/1/

Answer 3

您可以附加一个事件处理程序，该处理程序禁用单击所有无线电的默认操作，并执行您需要执行的操作而不是默认操作。如此，请附上一个只包含对event.preventDefault()的调用的处理程序，以及您自己的代码。

请参阅event.preventDefault()

的jquery文档

$(document).ready(function() {
    var allowChoose = true;
    $('input').click(function(e) {
        if (allowChoose) {
            allowChoose = false;
        } else {
            e.preventDefault();
        }
    });
});

如您所见，您可以使用“＆＃39; allowChoose＆＃39;允许第一次单击时的默认操作，然后更改标志并避免下次调用时的默认操作（检查无线电）。

请参阅fiddle here。

Answer 4

快速解决方案：您可以停用其他单选按钮，所选值仍保持启用状态。

var $Svars = $('input[name="Svar"]');
$Svars.change(function () { 
     $Svars.not(this).prop("disabled", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="Svar0" name="Svar" value="Yes" /> Yes
<input type="radio" id="Svar1" name="Svar" value="No" /> No
<input type="radio" id="Svar2" name="Svar" value="MayBe" /> Maybe

解决方案2 ：另一种解决方案是添加class或data属性以排除其他属性，如下所示。

var $Svars = $('input[name="Svar"]');
$Svars.change(function () { 
    var $this = $(this);
    if($this.val() == $this.data('selected') || $this.data('selected') == undefined) {
        $Svars.data('selected', $this.val());
    } else {
        $Svars.val([$this.data('selected')]);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="Svar0" name="Svar" value="Yes" /> Yes
<input type="radio" id="Svar1" name="Svar" value="No" /> No
<input type="radio" id="Svar2" name="Svar" value="MayBe" /> Maybe

Answer 5

您可以在选中其他按钮时禁用其他按钮，这样在提交表单时将会发送所选按钮。

jQuery("input[name=Svar]").change(function() {
    jQuery("input[name=Svar]").prop("disabled", "disabled");
    jQuery(this).prop("disabled",false);
});

阻止用户再次点击广播而不禁用广播

5 个答案:

更新（禁用前延迟）：