在自定義JavaScript

Question

Fiddle Link

我有兩種類型OPTGROUP與選項，同時選擇任何OPTGROUP。

我需要在兩組之間進行驗證。怎麼做 ？

案例1

如果我選擇A optgroup.simuultanseuly我不能能夠選擇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)禁用/啓用表單元素。

$(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="" />