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：我可以根據選中的單選按鈕禁用選擇菜單中的特定選項嗎？

回答

相關問題