如何使用 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');
    });
});