Mootools를 사용하여 다른 라디오 버튼 선택 사항에 따라 라디오 버튼 옵션을 만드는 방법은 무엇입니까?

Question

나는 6 개의 항목이있는 양식을 가지고 있는데, 각각의 항목은 1-6 개의 순서로 중요도 순으로 정렬 될 수 있습니다.

Here's a screenshot.

는 기본적으로, 나는 그것을 설정해야합니다 그래서 하나의 항목 (예를 들어), 다음 "3"다른 모든 항목에 대한 무효가되어, 3 순위를 얻는 경우에.

따라서 사용자는 각 항목에 대해 아직 선택되지 않은 번호 만 선택할 수 있습니다 (따라서 항목이 실제로 1-6 점이되고 다른 항목에 대해 숫자가 반복되지 않도록 할 수 있습니다).).

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

어떤 아이디어 :

여기에 내가 함께 일하고 있어요 마크 업 (마이너스 표상 된 div는)입니까?

Answer 1

(나는 이들을 대상으로 사용할 수없는 주변의 사업부가 없기 때문에) 페이지에 다른 라디오 버튼 세트와 상호 작용을 방지하기 위해 꽤 자세한 코드를 사용하는 데 결국.

$$('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 2

각 라디오 버튼에 대해 onclick 이벤트에 바인딩하고 setProperty('disabled', 'disabled')으로 해당 라디오 버튼을 비활성화합니다. 마크 업을 정상화 할 수 있다면 쉽게 할 수 있지만 모든 필드의 이름을 가진 배열을 저장하면 여전히 가능합니다. 당신이 갈 수

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

이 방법 :

또한

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

, 당신이 jQuery를 전환하는 것이 모두 가능하다면, 그것은 당신의 인생을 더 쉽게하고 쉽게 사람들이 당신을 도와 할 수 있도록합니다.

Answer 3

제공 한 마크 업과 함께 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 4

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