选择一个单选按钮后，我想剩下的按钮被禁用

Question

我在乒乓球比赛工作中的Java脚本，其中一个可以更改使用一组单选按钮

<form action=""> 
     <input type="radio" name="level" value="8">Beginner<br> 
     <input type="radio" name="level" value="4">Intermediate<br> 
     <input type="radio" name="level" value="2">Pro<br>   
     </form> 

水平调整的难度第一次尝试的时候，但是当有人点击另一个单选按钮时，游戏法庭就会受到影响并保持清爽。我正在使用html 5并将fps设置为60.我想要的是在新页面刷新后，当选择一个单选按钮时，其余按钮应该被禁用，直到用户刷新页面。有没有办法在香草js中做到这一点？

Answer 1

您可以在单选按钮集合上循环并在更改事件时更改其禁用状态。例如像这样：

var radios = [].slice.call(document.querySelectorAll('input[name=level]')); 
 

 
radios.forEach(function(radio) { 
 
    radio.addEventListener('change', function() { 
 
     radios.forEach(function(r) { 
 
      r.disabled = r !== radio; 
 
     }); 
 
    }); 
 
});

<form action=""> 
 
    <input type="radio" name="level" value="8">Beginner<br> 
 
    <input type="radio" name="level" value="4">Intermediate<br> 
 
    <input type="radio" name="level" value="2">Pro<br> 
 
</form>

Answer 2

如果你只是想后点击禁用它们那么这应该做的..

<form action="" name="formName"> 
      <input type="radio" name="level" value="8">Beginner<br> 
      <input type="radio" name="level" value="4">Intermediate<br> 
      <input type="radio" name="level" value="2">Pro<br>   
      </form> 

onclick事件

$("input:radio[name=level]").click(function(){ 
    var radios = document.formName.level; 

     for (var i=0, iLen=radios.length; i<iLen; i++) { 
      radios[i].disabled = true; 
     } 
}); 

这里是一个小提琴 Click here

Answer 3

你可以用普通的javascript来做到这一点。

var buttons = document.getElementsByName('level'); 
 

 
for(var i = 0; i < buttons.length; i++) 
 
{ 
 
    buttons[i].onclick = function() 
 
    { 
 
    \t for(var j = 0; j < buttons.length; j++) 
 
     { 
 
      if(j != i) 
 
      { 
 
       buttons[j].setAttribute('disabled', 'true'); 
 
      } 
 
     } 
 
    } 
 
}

另外我想摆脱<form>标签，因为它在这里没有任何意义。