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

问题描述

我正在用Java脚本开发一种乒乓游戏，可以使用一组单选按钮更改难度级别

I am working on a pong game in java script where one can change the difficulty level using a set of radio buttons

<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。我想要的是刷新新页面后，当一个人选择一个单选按钮时，其余的按钮应变为禁用状态，直到用户刷新页面为止。

The level adjusts well on the first try but when someone clicks on another radio button the game court is affected and keeps on refreshing. I am using html 5 and set the fps to 60. What I wanted is after a new page refresh, when one selects one radio button, the remaining buttons should become disabled till the user refreshes the page. Is there a way to do this in vanilla js?

推荐答案

您可以遍历单选按钮集合，并在更改时更改其禁用状态。事件。例如这样的

You can loop over radio buttons collection and change their disabled status on change event. For example like this:

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>

这篇关于选择一个单选按钮后，我希望其余按钮被禁用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！