JavaScript：我可以根据选中的单选按钮禁用选择菜单中的特定选项吗？

Question

我是 Javascript 的新手，我正在尝试创建一个可以接受篮球锦标赛预订的表单。

我有一个单选按钮列表和一个下拉菜单。单选按钮允许用户选择他们想要参加的球队，下拉菜单允许用户选择比赛的日期。

但是，并非所有球队都可以每天比赛。

例如； 我正在尝试设置表单，以便如果用户选择他们想在 A 队中比赛（通过带有name='team' 的单选按钮），因为 A 队每天都在比赛，除了星期天，只有星期天从下拉列表中被禁用菜单。

因此，如果用户在单选按钮上选择了团队 A，那么在选择菜单中，周日将无法选择。

我真的不太确定从哪里开始。 谢谢！

编辑：我知道有类似的问题，但我无法找到一个涉及根据是否选中单选按钮更改选择组中的单个值的问题。由于它们是不同的表单元素，我不知道如何调用脚本中的每个特定元素。

编辑 2（代码）：

var gameTime = function () 
        {  
           if ($('input:radio[name="team"]').val == 'Team A')
           {
              $("option[value='Sunday']").prop("disabled", true);
           }
        };

这就是我所拥有的。好像没用过

Answer 1

我不知道你的团队日程是如何保存的，所以我只是编造了一些东西。基本上，当您选择一个团队时，会引用一个数组来查看该团队的可用日期，然后禁用菜单中的相应选项。

HTML：

<p>Choose a team:</p>
<div>
    <input type="radio" name="team" id="team-a" value="0" />
    <label for="team-a">Total Ballers</label>
</div>
<div>
    <input type="radio" name="team" id="team-b" value="1" />
    <label for="team-b">Party People</label>
</div>
<div>
    <input type="radio" name="team" id="team-c" value="2" />
    <label for="team-c">Weekend Warriors</label>
</div>
<p>Choose a day:</p>
<select>
    <option>-- Choose a day --</option>
    <option>Monday</option>
    <option>Tuesday</option>
    <option>Wednesday</option>
    <option>Thurday</option>
    <option>Friday</option>
    <option>Saturday</option>
    <option>Sunday</option>
</select>

JS（jQuery）：

//schedules are saved in a 2D array, the seven numbers correspond to Monday through Sunday
//1 = available, 0 = not available
//first set for team A, second for team B, third for team C
var schedules = [[1,1,1,1,1,1,1], [1,1,1,1,1,0,0], [0,0,0,0,0,1,1]];

$('input').on('click', function() {
    //looks at the value of the clicked radio button
    var value = $(this).val();
    //grabs the corresponding array from schedules
    var schedule = schedules[value];
    //loops through each day in the menu, disable that option if the array shows a 0 for that day
    $('option:not(:first-child)').each(function(i) {
        if (!schedule[i]) {
            $(this).attr('disabled', true).css('background-color','#eee');
        } else {
            $(this).attr('disabled', false).css('background-color','white');
        }
    });
}).on('change', function() {
    $('option:first-child').attr('selected', true);
});
//last part changes the menu back to 'choose a day' when a different team is chosen

这是fiddle。

Answer 2

这里看不到你的代码是一个非常简单的解决方案

 $('input').click(function() {
if($('#team_A').is(':checked')) 
{
    alert("checked");
      $(".sunday").attr('disabled','true');
}
else if($('#team_B').is(':checked'))
{
      $(".sunday").removeAttr('disabled');
}
});

这就是你想要的吗？？

New Demo