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.我想要的是在新页面刷新之后，当选择一个单选按钮时，其余按钮应该被禁用，直到用户刷新页面。有没有办法在vanilla 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()
    {
    	for(var j = 0; j < buttons.length; j++)
        {
            if(j != i)
            {
                buttons[j].setAttribute('disabled', 'true');
            }
        }
    }
}

此外，我会删除<form>标签，因为它在这里没有用处。

选择一个单选按钮后，我希望其余按钮被禁用

3 个答案: