Javascript javascript启用单击时禁用单选按钮并一次只选择一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8481812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript enable disable radio button on click and select only one at a time
提问by Nomad
I am trying to do this.
我正在尝试这样做。
I have 3 radio buttons,
我有 3 个单选按钮，
- If click on a radio and it's set, next time i click on it. It should be unchecked/rest.
- 如果点击收音机并设置好，下次我点击它。它应该是未经检查的/休息。
I want to do in standard javascript without jquery as can't have that at the moment.
我想在没有 jquery 的标准 javascript 中做，因为目前还没有。
Here's my code so far.
到目前为止，这是我的代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function toggle(radioBtn)
{
if(radioBtn.checked)
{
radioBtn.checked = false;
}
else
{
radioBtn.checked = true;
}
// only select one at a time.
}
</script>
</head>
<body>
<form id="myForm" name="myForm">
<input type="radio" name="radioBtn" id="radioBtn1" value="A" onClick="toggle(this);" />
<input type="radio" name="radioBtn" id="radioBtn1" value="B" onClick="toggle(this);"/>
<input type="radio" name="radioBtn" id="radioBtn1" value="C" onClick="toggle(this);"/>
</form>
</body>
</html>
Please help. Your help will be appreciated. Thanks
请帮忙。您的帮助将不胜感激。谢谢
回答by PriorityMark
You could just do something simple and straight forward inline, like this:
你可以做一些简单直接的内联，像这样：
<input type="radio" name="radioBtn" id="radioBtn1" value="A" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false" />
<input type="radio" name="radioBtn" id="radioBtn2" value="B" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false"/>
<input type="radio" name="radioBtn" id="radioBtn3" value="C" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false"/>
回答by Aaron
You can get around the browser's default behavior for radio buttons and achieve the toggle effect you're after by creating an additional 'hidden' radio button, and simulating a clickevent for it when the user toggles off one of the visible buttons. See a working example in this jsFiddle: http://jsfiddle.net/k73Nt/
您可以绕过浏览器对单选按钮的默认行为，并通过创建额外的“隐藏”单选按钮并click在用户关闭可见按钮之一时为其模拟事件来实现您所追求的切换效果。请参阅此 jsFiddle 中的一个工作示例：http: //jsfiddle.net/k73Nt/
回答by Michael
This might not be a solution which will go into the book for being clean but i got it working.
这可能不是一个解决方案，它会因为清洁而进入书中，但我让它工作了。
HTML:
HTML：
<input type="radio" name="radioBtn" id="radioBtn1" value="A" onmouseup="toggle(this);"/>
<input type="radio" name="radioBtn" id="radioBtn2" value="A" onmouseup="toggle(this);" />
<input type="radio" name="radioBtn" id="radioBtn3" value="A" onmouseup="toggle(this);"/>
Javascript:
Javascript：
function toggle(radioBtn)
{
if(radioBtn.checked)
{
setTimeout("disableRadio('"+radioBtn.id+"')",10);
} else {
radioBtn.checked = true;
}
}
function disableRadio(radioId) {
el = window.document.getElementById(radioId);
el.checked = false;
}
Your code wasn't working because the javascript setter gets overruled by html click events or something. I don't know how to explain it the correct way but having a delay solves your problem.
您的代码无法正常工作，因为 javascript setter 被 html click 事件或其他东西否决了。我不知道如何以正确的方式解释它，但是延迟可以解决您的问题。
Hope this helps out!
希望这会有所帮助！
回答by A.B.Cade
Keep a record of which radioButton is checked and which isn't (can be done with hidden fields or an array) and set the checked/unchecked accordinally
记录哪些单选按钮被选中，哪些没有被选中（可以使用隐藏字段或数组来完成）并相应地设置选中/未选中
