HTML 调用一个 JS 函数来禁用单选按钮答案

【问题标题】：HTML call a JS function to disable radio buttonsHTML 调用一个 JS 函数来禁用单选按钮
【发布时间】：2015-12-10 22:21:43
【问题描述】：

如果从下拉列表中进行了某些选择，我想在我的网页上禁用某些单选按钮。

下面是我的头部：

<head>
<script> 
    function myRadio() {
        if {
        document.getElementById("time").value = "19.30";
        return document.getElementById("duration_120").disabled = true;
        }
        else {
            return false;
        }
    }
</script>
</head>

这是我的身体部分：

<select name="time" form="bookingForm" id="time" onchange="return myRadio()">
  <option value="19.00">19.00</option>
  <option value="19.30">19.30</option>
  <option value="20.00">20.00</option>
  <option value="20.30">20.30</option>
</select>
<label>Duration: </label><br>
<input type="radio" name="duration" id="duration_30" value="30">30 mins
<input type="radio" name="duration" id="duration_60" value="60">60 mins
<input type="radio" name="duration" id="duration_90" value="90">90 mins
<input type="radio" name="duration" id="duration_120" value="120">120 mins

所以我想要做的是，如果选择了 19.30 的时间，那么我想禁用（灰色）120 分钟单选按钮。如果选择 20.30，那么我想禁用 60、90 和 120 分钟单选按钮。在 19.00 之前还有更多选择选项，我希望启用所有单选按钮。

我目前正在尝试的功能不起作用，因此感谢您提供有关如何执行此操作的任何帮助。希望这是有道理的。

【问题讨论】：

标签： javascript html drop-down-menu radio-button

【解决方案1】：

使用纯javascript，我认为这就是你想要的......

function myRadio() {

//Enable all (the 'each' way, with no jquery)
document.getElementById('duration_120').disabled = false;
document.getElementById('duration_90').disabled = false;
document.getElementById('duration_60').disabled = false;
document.getElementById('duration_30').disabled = false;

//switch for undefined options and durations
switch(document.getElementById('time').value) {

  // 1 case for each option
  case '19.30':
  document.getElementById('duration_120').disabled = true;
  break;

  case '20.30':
  document.getElementById('duration_120').disabled = true;
  document.getElementById('duration_90').disabled = true;
  document.getElementById('duration_60').disabled = true;
  break;

 }

}

【讨论】：

【解决方案2】：

disableDurationTimeMap = {
  '19.30': [120],
  '20.30': [60, 90, 120]
};

function disableDurationsForTime(timeValue) {
  var disableDurations = disableDurationTimeMap[timeValue];
  if (disableDurations === undefined) { return; }
  disableDurations.forEach(function(duration) {
    document.querySelector('input[name="duration"][value="' + duration.toString() + '"]').disabled = true;
  });
}

function enableAllDurations() {
  var durations = document.querySelectorAll('input[name="duration"]');
  Array.prototype.forEach.call(durations, function(input) {
    input.disabled = false;
  });
}
var timeSelect = document.getElementById('time');
timeSelect.addEventListener('change', function() {
  enableAllDurations();
  var selectedTime = timeSelect.options[timeSelect.selectedIndex].value;
  disableDurationsForTime(selectedTime);
});

<select name="time" form="bookingForm" id="time">
  <option value="19.00">19.00</option>
  <option value="19.30">19.30</option>
  <option value="20.00">20.00</option>
  <option value="20.30">20.30</option>
</select>
<label>Duration:</label>
<br>
<input type="radio" name="duration" id="duration_30" value="30">30 mins
<input type="radio" name="duration" id="duration_60" value="60">60 mins
<input type="radio" name="duration" id="duration_90" value="90">90 mins
<input type="radio" name="duration" id="duration_120" value="120">120 mins

【讨论】：