選擇一個單選按鈕後，我想剩下的按鈕被禁用

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>標籤，因爲它在這裏沒有任何意義。