How to make radio button options dependent on other radio button choices using Mootools?
Posted
by Mike Crittenden
on Stack Overflow
See other posts from Stack Overflow
or by Mike Crittenden
Published on 2010-03-21T23:12:25Z
Indexed on
2010/03/21
23:21 UTC
Read the original article
Hit count: 632
I have a form where there are 6 items, each of which can be ranked from 1-6 in order of importance.
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?
© Stack Overflow or respective owner