选择后如何禁用所有单选按钮?

时间:2018-01-03 18:17:04

标签: javascript radio-button

我正在尝试在选中/选择一个具有特定名称的所有单选按钮后禁用它。

这是我的尝试:

var radios = document.getElementsByName("question0");
for (var i = 0, iLen = radios.length; i < iLen; i++) {
  radios[i].onclick = showResult;
}

function showResult() {
  var x = document.getElementsByClassName("checkbox");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].disabled = true;
  }
}

问题是现在所有的单选按钮都会被禁用,即使是那些名字为question1的单选按钮。

我如何针对每个问题执行此功能?因此,如果我在question1选择一个选项,则无法更改我的答案,但仍可选择question2

3 个答案:

答案 0 :(得分:1)

当点击其中一个时,您可以根据<div class="container"> <div class="calendar-container"> <header> <div class="month">Januar</div> </header> <table class="calendar"> <thead> <tr> <td>Mon</td> <td>Tue</td> <td>Wed</td> <td>Thu</td> <td>Fri</td> <td>Sat</td> <td>Sun</td> </tr> </thead> <tbody> <tr> <td class="prev-month">29</td> <td class="prev-month">30</td> <td class="prev-month">31</td> <td class="newyear">1<span class="tooltiptext">Tooltip text</span> </td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> </tr> <tr> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td class="current-day">18</td> </tr> <tr> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> <td class="next-month">1</td> </tr> </tbody> </table> </div> <!-- end calendar-container --> </div> <!-- end container -->定位单选按钮来停用它们。

请参阅此工作示例:

&#13;
&#13;
name
&#13;
var radios = document.querySelectorAll("input[type=radio]");
for (var i = 0, iLen = radios.length; i < iLen; i++) {
  radios[i].onclick = function() {
    showResult(this.name);
  }
}

function showResult(name) {
  var x = document.getElementsByName(name);
  for (var i = 0; i < x.length; i++) {
    x[i].disabled = true;
  }
}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

提供要禁用的所有单选按钮的相同类,并在类单击事件中添加属性禁用

你明白吗?

答案 2 :(得分:0)

showResult应该只是禁用与点击按钮同名的按钮。

  function showResult() {
     var x = document.getElementsByName(this.name);
     var i;
     for (i = 0; i < x.length; i++) {
        x[i].disabled = true;
     }
  }

将其设为所有单选按钮的点击处理程序:

Array.from(document.querySelectorAll("input[type=radio]")).forEach(function(button) {
    button.addEventListener("click", showResult);
});