How to make radio button options dependent on other radio button choices using Mootools?

Question

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?

Answer 1

Bind to the onclick event for each radio button, and disable the appropriate radio buttons with setProperty('disabled', 'disabled'). This will be easier to do if you can normalize your markup a bit, but is still possible if you store an array with names of all the fields.

var fields = ['importantProductQuality', 'importantPrice', ...]

This way you can go:

fields.each(function(field) {
    $(field + '_' + ranking).setProperty('disabled', 'disabled');
});

Also, if it's at all possible for you to switch to jQuery, it will make your life easier and make it easier for people to help you.

Answer 2

Here is the mootools way to do it given the markup you provided.

// Get the list of items for the second set.
var importantPrices = $$('input[name=importantPrice]');

// Add an event to each radio input in the first set
$$('input[name=importantProductQuality]').addEvent('click', function(e) {

  var target = $(e.target);

  // If one of the buttons in the first set is selected, disable the
  // one with the matching value in the second set.
  if (target.get('checked')) {
    importantPrices.each(function(radio) {
      radio.set(disabled, radio.get('value') == target.get('value');
    });
  } else {
    // Enable all again
    importantPrices.set('disabled', false);
  } 
});

Answer 3

$$('input[type=radio]').addEvent('click', function(){ 
    var val = this.get('value');
    $$('input[type=radio][value=' + val + ']').set('disabled', 'disabled');
});​

Answer 4

Ended up having to use pretty verbose code to prevent it interacting with other radio button sets on the page (since there's no surrounding div I could use to target these).

$$('input[name=importantProductQuality], input[name=importantPrice], input[name=importantCustomerService], input[name=importantLeadTimes], input[name=importantMinimumOrderQuantities], input[name=importantAccountManager]').addEvent('click', function(){
    $$('input[name=importantProductQuality]').set('disabled', false);
    $$('input[name=importantPrice]').set('disabled', false);
    $$('input[name=importantCustomerService]').set('disabled', false);
    $$('input[name=importantLeadTimes]').set('disabled', false);
    $$('input[name=importantMinimumOrderQuantities]').set('disabled', false);
    $$('input[name=importantAccountManager]').set('disabled', false);
    $each($$('input[name=importantProductQuality][checked], input[name=importantPrice][checked], input[name=importantCustomerService][checked], input[name=importantLeadTimes][checked], input[name=importantMinimumOrderQuantities][checked], input[name=importantAccountManager][checked]'), function(current, index){
        var val = current.get('value');
        $$('input[type=radio][name!=OnlineOrderingHistory][value=' + val + ']').set('disabled', 'disabled');
    });
});