jQuery를 사용하여 다중 선택 드롭 다운에서 요소를 선택하십시오.

Question

"Main Colors"및 "Rest of Colors"의 두 그룹이 있습니다. 화이트
메인 색상 => 적색, 녹색, 청색, 색상의 노란색
나머지 => 블랙, 마젠타, 로즈,

내가 다중 선택 드롭 다운의 색상 뒀다 :

<select id="multipeColorSelect" multiple size="8"> 
    <option class="main" value="Red">Red</option> 
    <option class="main" value="Green">Green</option> 
    <option class="main" value="Blue">Blue</option> 
    <option class="main" value="Yellow">Yellow</option> 
    <option class="other" value="Black">Black</option> 
    <option class="other" value="Magenta">Magenta</option> 
    <option class="other" value="Rose">Rose</option> 
    <option class="other" value="White">White</option> 
</select> 

내가 2가를 체크 박스. "메인 색상"그룹에있는 하나의 색상을 선택하면 아래의 코드에서

<label>Main colors 
    <input type="checkbox" data-class="main" name="colorcheckbox" value="maincolors" /> 
</label> 
<label>Rest of colors 
    <input type="checkbox" data-class="other" name="colorcheckbox" value="restofcolors" /> 
</label> 

는
1), 체크 박스 다른 "색상의 나머지"는 사용할 수 없습니다.
2) "나머지 색상"그룹에서 하나의 색상을 선택하면 다른 "기본 색상"확인란이 비활성화됩니다. 변화에 대한 죄송합니다

$('input[name="colorcheckbox"]').click(function() { 
    $('#multipeColorSelect option.' + $(this).data("class")).prop('selected', $(this).prop("checked")); 
}); 

$('#multipeColorSelect').change(function() { 
    var mainChecked = 0; 
    var otherChecked = 0; 

    $(this).find("option").each(function() { 
     if ($(this).prop("selected")) { 
      $(this).hasClass("main") ? mainChecked++ : otherChecked++; 
     }   
    }); 

    $("input[data-class='other']").prop("disabled", mainChecked == 1); 
    $("input[data-class='main']").prop("disabled", otherChecked == 1); 

    if ($('#multipeColorSelect option[value="Black"]:checked').length > 0 && $('#multipeColorSelect option[value="Blue"]:checked').length) { 
     $("input[data-class='other'], input[data-class='main']").prop("disabled", false); 
    } 

}); 

: 1) "선택, 다른" "레드"와 "녹색"또는 "녹색"과 "블루"또는 "블루와"노란색 경우 나머지 색상의 "확인란해야 2) "검정", "자홍색", "자홍색", "장미"또는 "장미"와 "흰색"을 선택한 경우 다른 "주 색상"확인란을 선택하지 않아야합니다.

또한 jQuery 코드를 더 간단하게 단순화 할 수 있는지 알려 주시기 바랍니다. 도와주세요.

jsfiddle

:

Answer 1

나는 $ .inArray를 사용하여 배열에 사용자가 선택한 색상의 값을 저장합니다.
JsFiddle을 확인하고 내가 만든 코드가 문제를 해결하는지 확인할 수 있습니다.

http://jsfiddle.net/5u63yu8t/5/

$('#multipeColorSelect').change(function() { 
     var optClass = []; 
     var values = $(this).val(); 
     $("input[data-class='other'], input[data-class='main']").attr("disabled", false); 

     for (var i = 0; i<values.length; i++) { 

     optClass.push(($('#multipeColorSelect option[value="'+values[i]+'"]').attr('class')));   
    } 

    if ($.inArray("main", optClass) !== -1) { 

     $("input[data-class='other']").attr("disabled", true); 
    } 

    if ($.inArray("other", optClass) !== -1) {  
     $("input[data-class='main']").attr("disabled", true); 
    } 

    if ($.inArray("Black", values) !== -1 && $.inArray("Yellow", values) !== -1 && values.length === 2) { 

     $("input[data-class='other'], input[data-class='main']").attr("disabled", false);  
    } 
}); 

Answer 2

이 문제 해결에 도움이 되었습니까?

$('input[name="colorcheckbox"]').click(function() { 
    $('#multipeColorSelect option.' + $(this).data("class")).prop('selected', $(this).prop("checked")); 
}); 

$('#multipeColorSelect').change(function() { 
    var mainChecked = 0; 
    var otherChecked = 0; 

    $(this).find("option").each(function() { 
     if ($(this).prop("selected")) { 
      $(this).hasClass("main") ? mainChecked++ : otherChecked++; 
     }   
    }); 

    $("input[data-class='other']").prop("disabled", mainChecked >= 1 && otherChecked === 0); 
    $("input[data-class='main']").prop("disabled", otherChecked >= 1 && mainChecked === 0); 

    if ($('#multipeColorSelect option[value="Black"]:checked').length > 0 && $('#multipeColorSelect option[value="Blue"]:checked').length) { 
     $("input[data-class='other'], input[data-class='main']").prop("disabled", false); 
    } 
});