カスタムで同時に誰もOPTGROUP選択し、私はオプションでOPTGROUPの2種類がありますjavascriptの

Question

Fiddle Link

。

2つのグループの間で検証する必要があります。どうやってするか ？

ケース1

私はoptgroup.simuultanseuly Aを選択した場合、私はいずれかを選択する必要がB

をOPTGROUP選択することができ傾きます。両方を同時に選択することはできません。

Javascriptを

$('#select').change(function() { 
    var selectedOption = $('#select option:selected'); 
    var label = selectedOption.closest('optgroup').attr('label'); 
    var selectText = selectedOption.text(); 
    if(label == 'A'){ $('.selectoption').val(label); } 
    var length = $(this).find(':selected').text().length; 

    $('') 

    if(label== 'A'){ 
     alert('check'); 
    } else { 
    alert('no test'); 
    } 

    // if (length < 2) { 
     //$(this).find(':selected').text(label + ' - ' + selectText); 
    //} 
}); 

Answer 1

フォーム要素を有効/無効にするelement.prop('disabled', boolean)を使用することができます。

あなたは、このような上記の技術使用して他のoptgroupを無効にすることができます。今、私は今、Bを選択することができますどのように

$(function(){ 
 

 
    $('#select').change(function() { 
 
    \t $('optgroup').prop('disabled', false); 
 
     $('optgroup').removeClass('selected'); 
 
     var selectedOption = $('#select option:selected'); 
 
     $(".selectoption").val(selectedOption.closest('optgroup').attr('label')); 
 
     
 
     selectedOption.closest('optgroup').addClass('selected'); 
 
     var label = selectedOption.closest('optgroup').attr('label'); 
 
     var selectText = selectedOption.text(); 
 
     $(this).find('optgroup').each(function(i) { 
 
     \t if(!$(this).hasClass('selected')) { 
 
     \t $(this).prop('disabled', true); 
 
     } else { 
 
     \t $(this).prop('disabled', false); 
 
     } 
 
     }); 
 
    }); 
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select" multiple style="height:150px;width:150px;"> 
 
    <optgroup label="A"> 
 
     <option value="">1</option> 
 
     <option value="">2</option> 
 
     <option value="">3</option> 
 
    </optgroup> 
 
    <optgroup label="B"> 
 
     <option value="">4</option> 
 
     <option value="">5</option> 
 
     <option value="">6</option> 
 
    </optgroup> 
 
</select> 
 
<input type="text" name="selectoption" class="selectoption" value="" />