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

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="importan开发者_JAVA百科tPrice" 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?

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);
  } 
});

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

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.

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');
    });
});