Question

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

以下是我的主管部分：

<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＆amp; 120分钟单选按钮。在19.00之前还有更多选择选项，我希望启用所有单选按钮。

我目前正在尝试的功能不起作用，所以对如何做到这一点的任何帮助表示赞赏。希望这是有道理的。

Answer 1

＆＃13;

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);
});

＆＃13;

<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

＆＃13;

Answer 2

使用纯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;

 }

}

HTML调用JS函数来禁用单选按钮

2 个答案: