2012-06-08 4 views
11

Mam pole wyboru, które zawiera opcje i optgroup, które są generowane dynamicznie za pomocą php.Now, gdy zaznaczę "ALL" wszystkie inne optgroup, opcje powinny być wyłączone i kiedy wybiorę opcję inną niż "ALL", opcja "ALL" powinna być wyłączonaJak włączyć/wyłączyć opcje w polu wyboru przy użyciu jquery

<select name="select1" id ="select1" onchange="handleSelect()"> 
    <option value ="-1">ALL</option> 
    <optgroup label="CARS"> 
     <option value="ford">FORD</option> 
     <option value="Nissan">Nissan</option> 
    </optgroup> 
</select> 
<script> 
    function handleSelect() { 
     var selectVal = $("#select1:selected").text(); 
     if (selectVal == "ALL") { 
      // cannot disable all the options in select box 
      $("#select1 option").attr("disabled", "disabled"); 
     } 
     else { 
      $("#select1 option[value='-1']").attr('disabled', 'disabled'); 
      $("#select1 option").attr('disabled', ''); 
     } 
    } 
</script> 

Jak mogę to sprawić?

+1

Jak możesz * wybrać dowolne opcja inna niż "ALL" *, jeśli wszystkie opcje są wyłączone po wybraniu "ALL" (i na odwrót)? – VisioN

Odpowiedz

20

Jest to rodzaj dziwne rzeczy się robi, ale tutaj jest kod, który spełnia Twoje wymagania.

$('select').on('change', function() { 
    if (this.value == '-1') { 
     $('optgroup option').prop('disabled', true); 
    } else { 
     $('optgroup option').prop('disabled', false); 
    } 
}); 

żywo Przykład - http://jsfiddle.net/NpNFh/

0

Można użyć dwóch kolejnych wariantów składni atrybutu niepełnosprawnych, w zależności od wersji HTML są kierowane:

HTML4: <option value="spider" disabled>Spider</option> 
XHTML: <option value="spider" disabled="disabled">Spider</option> 
8

Można użyć następującego code.Let rozważmy masz trzy wybierz pola następująco

<select class="sel_box" id="sel_1" onchange="disable_sel(this.value);" ></select> 
<select class="sel_box" id="sel_2" onchange="disable_sel(this.value);" ></select> 
<select class="sel_box" id="sel_3" onchange="disable_sel(this.value);" ></select> 

i niech funkcja 'opt' jest argumentem teraz użyj następującego po

$('.sel_box option[value="'+opt+'"]').attr("disabled", true);