Как сделать параметры переключателей зависимыми от других вариантов переключателей с помощью Mootools?

Question

У меня есть форма, где есть 6 предметов, каждый из которых может быть ранжирован от 1 до 6 в порядке важности.

Вот скриншот.

По сути, мне нужно настроить его так, чтобы, если один элемент получил оценку 3 (например), тогда «3» отключался для всех остальных элементов.

Следовательно, пользователь должен иметь возможность выбирать только номер, который еще не был выбран для каждого элемента (поэтому мы можем гарантировать, что элементы действительно будут оценены как 1-6, и никакие номера не будут повторяться для различных элементов) .

Вот разметка, с которой я работаю (минус презентационные div):

<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>

Есть идеи?

Answer 1

Вот способ mootools сделать это с учетом предоставленной вами разметки.

// 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 2

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

Answer 3

Закончилась необходимость использовать довольно подробный код для предотвращения его взаимодействия с другими наборами переключателей на странице (так как нет никакого окружающего div, который я мог бы использовать для нацеливания на них).

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

Answer 4

Привязать к событию onclick для каждой радиокнопки и отключить соответствующие радиокнопки с помощью setProperty('disabled', 'disabled'). Это будет легче сделать, если вы сможете немного нормализовать разметку, но все же возможно, если вы сохраните массив с именами всех полей.

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

Таким образом, вы можете пойти:

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

Кроме того, если вы вообще сможете переключиться на jQuery, это облегчит вашу жизнь и облегчит людям помощь.