如何根据使用Mootools的其他单选按钮选项制作单选按钮选项？

Question

我有一个表格，其中有6个项目，每个项目的重要性顺序可以从1-6开始。

Here's a screenshot.

基本上，我需要进行设置，以便如果一个项目的排名为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

绑定到每个单选按钮的onclick事件，并使用setProperty('disabled', 'disabled')禁用相应的单选按钮。如果你可以稍微标准化你的标记，这将更容易做到，但如果你存储一个包含所有字段名称的数组，它仍然可以。

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

这样你可以去：

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

此外，如果您可以切换到jQuery，它将使您的生活更轻松，让人们更容易为您提供帮助。

Answer 4

结束必须使用非常详细的代码来防止它与页面上的其他单选按钮集交互（因为我没有可以用来定位这些的周围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');
    });
});