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

-1

我是Javascript新手，我正在尝试创建一个表格，以预订篮球比赛。JavaScript：我可以根据选中的单选按钮禁用选择菜单中的特定选项吗？

我有一个单选按钮列表和一个下拉菜单。单选按钮允许用户选择他们想要玩的球队，下拉菜单让用户选择要玩哪一天。

但是，并非所有的球队都可以每天都打球。

例如; 我试图设置表单，以便如果用户选择他们想在A队中玩的方式（通过单选按钮name='team'），由于A队每天除周日外，每周只能在下拉菜单中禁用星期日。

因此，如果用户选择单选按钮上的队伍A，则在选择菜单中，星期日将被禁止选择。

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

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

EDIT 2（CODE）：

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

这是我的东西。似乎没有被工作

来源

2014-09-11 barneesh

是的，你可以禁用一个特定的选项。阅读[我如何启用/禁用选择框中使用jquery]（http://stackoverflow.com/questions/10953589/how-do-i-enable-disable-options-in-select-box-using-jquery）可能会帮助你。没有看到你的代码，我们无法帮助你。 – Satpal 2014-09-11 07:13:50

为什么禁用？只是不显示在选择菜单中的选项..您可以使用onclick函数..张贴您的代码，直到现在.. – ss56 2014-09-11 07:14:07

没有人会给你一个完整的解决方案，没有你显示一些努力。自己尝试一下，展示你做了什么以及你在哪里遇到了问题。 – Chris 2014-09-11 07:17:36

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

$('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

来源

2014-09-11 07:20:02

可能。我假设'#radio_button'和'#sunday_option'是单选按钮和选择的ID？ – barneesh 2014-09-11 07:30:19

是的，他们是！你有没有试过运行它？有用！ – 2014-09-11 07:33:09

我尝试过，但不幸的是它没有工作。看看你是否不介意：http://jsfiddle.net/06s765jx/ – barneesh 2014-09-11 07:37:53

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

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。

来源

2014-09-11 08:36:55 flowstoneknight

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

回答

相关问题