How to make radio button options dependent on other radio button choices using Mootools?
- by Mike Crittenden
I have a form where there are 6 items, each of which can be ranked from 1-6 in order of importance.
Here's a screenshot.
Basically, I need to set it up so that if one item gets a ranking of 3 (for example), then "3" becomes disabled for all the other items.
Therefore, the user should only be able to select a number that hasn't already been selected for each item (so we can ensure that the items really will be ranked 1-6 and no numbers will be repeated for different items).
Here's the markup I'm working with (minus the presentational divs):
<label for="importantProductQuality">Product Quality</label>
<input id="importantProductQuality_0" name="importantProductQuality" value="1" type="radio">
<label for="importantProductQuality_0">1</label>
<input id="importantProductQuality_1" name="importantProductQuality" value="2" type="radio">
<label for="importantProductQuality_1">2</label>
<input id="importantProductQuality_2" name="importantProductQuality" value="3" type="radio">
<label for="importantProductQuality_2">3</label>
<input id="importantProductQuality_3" name="importantProductQuality" value="4" type="radio">
<label for="importantProductQuality_3">4</label>
<input id="importantProductQuality_4" name="importantProductQuality" value="5" type="radio">
<label for="importantProductQuality_4">5</label>
<input id="importantProductQuality_5" name="importantProductQuality" value="6" type="radio">
<label for="importantProductQuality_5">6</label>
<label for="importantPrice">Price</label>
<input id="importantPrice_0" name="importantPrice" value="1" type="radio">
<label for="importantPrice_0">1</label>
<input id="importantPrice_1" name="importantPrice" value="2" type="radio">
<label for="importantPrice_1">2</label>
<input id="importantPrice_2" name="importantPrice" value="3" type="radio">
<label for="importantPrice_2">3</label>
<input id="importantPrice_3" name="importantPrice" value="4" type="radio">
<label for="importantPrice_3">4</label>
<input id="importantPrice_4" name="importantPrice" value="5" type="radio">
<label for="importantPrice_4">5</label>
<input id="importantPrice_5" name="importantPrice" value="6" type="radio">
<label for="importantPrice_5">6</label>
<label for="importantCustomerService">Customer Service</label>
<input id="importantCustomerService_0" name="importantCustomerService" value="1" type="radio">
<label for="importantCustomerService_0">1</label>
<input id="importantCustomerService_1" name="importantCustomerService" value="2" type="radio">
<label for="importantCustomerService_1">2</label>
<input id="importantCustomerService_2" name="importantCustomerService" value="3" type="radio">
<label for="importantCustomerService_2">3</label>
<input id="importantCustomerService_3" name="importantCustomerService" value="4" type="radio">
<label for="importantCustomerService_3">4</label>
<input id="importantCustomerService_4" name="importantCustomerService" value="5" type="radio">
<label for="importantCustomerService_4">5</label>
<input id="importantCustomerService_5" name="importantCustomerService" value="6" type="radio">
<label for="importantCustomerService_5">6</label>
<label for="importantLeadTimes">Lead Times</label>
<input id="importantLeadTimes_0" name="importantLeadTimes" value="1" type="radio">
<label for="importantLeadTimes_0">1</label>
<input id="importantLeadTimes_1" name="importantLeadTimes" value="2" type="radio">
<label for="importantLeadTimes_1">2</label>
<input id="importantLeadTimes_2" name="importantLeadTimes" value="3" type="radio">
<label for="importantLeadTimes_2">3</label>
<input id="importantLeadTimes_3" name="importantLeadTimes" value="4" type="radio">
<label for="importantLeadTimes_3">4</label>
<input id="importantLeadTimes_4" name="importantLeadTimes" value="5" type="radio">
<label for="importantLeadTimes_4">5</label>
<input id="importantLeadTimes_5" name="importantLeadTimes" value="6" type="radio">
<label for="importantLeadTimes_5">6</label>
<label for="importantMinimumOrderQuantities">Min Order Quantities</label>
<input id="importantMinimumOrderQuantities_0" name="importantMinimumOrderQuantities" value="1" type="radio">
<label for="importantMinimumOrderQuantities_0">1</label>
<input id="importantMinimumOrderQuantities_1" name="importantMinimumOrderQuantities" value="2" type="radio">
<label for="importantMinimumOrderQuantities_1">2</label>
<input id="importantMinimumOrderQuantities_2" name="importantMinimumOrderQuantities" value="3" type="radio">
<label for="importantMinimumOrderQuantities_2">3</label>
<input id="importantMinimumOrderQuantities_3" name="importantMinimumOrderQuantities" value="4" type="radio">
<label for="importantMinimumOrderQuantities_3">4</label>
<input id="importantMinimumOrderQuantities_4" name="importantMinimumOrderQuantities" value="5" type="radio">
<label for="importantMinimumOrderQuantities_4">5</label>
<input id="importantMinimumOrderQuantities_5" name="importantMinimumOrderQuantities" value="6" type="radio">
<label for="importantMinimumOrderQuantities_5">6</label>
<label for="importantAccountManager">Account Manager</label>
<input id="importantAccountManager_0" name="importantAccountManager" value="1" type="radio">
<label for="importantAccountManager_0">1</label>
<input id="importantAccountManager_1" name="importantAccountManager" value="2" type="radio">
<label for="importantAccountManager_1">2</label>
<input id="importantAccountManager_2" name="importantAccountManager" value="3" type="radio">
<label for="importantAccountManager_2">3</label>
<input id="importantAccountManager_3" name="importantAccountManager" value="4" type="radio">
<label for="importantAccountManager_3">4</label>
<input id="importantAccountManager_4" name="importantAccountManager" value="5" type="radio">
<label for="importantAccountManager_4">5</label>
<input id="importantAccountManager_5" name="importantAccountManager" value="6" type="radio">
<label for="importantAccountManager_5">6</label>
Any ideas?
