2012-06-08 40 views
11

Tôi có một hộp chọn có chứa các tùy chọn và optgroup được tạo động bằng cách sử dụng php.Now khi tôi chọn "TẤT CẢ" tất cả các khác optgroup, các tùy chọn sẽ bị tắt và khi tôi chọn bất kỳ tùy chọn nào khác ngoài "TẤT CẢ", tùy chọn "TẤT CẢ" phải được tắtLàm cách nào để bật/tắt tùy chọn trong Hộp Chọn bằng cách sử dụng 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> 

Làm cách nào để làm việc này?

+1

Làm cách nào bạn có thể chọn bất kỳ tùy chọn khác "ALL" * nếu tất cả các tùy chọn bị tắt khi bạn đã chọn "TẤT CẢ" (và ngược lại)? – VisioN

Trả lời

20

Đây là loại một điều kỳ lạ được làm nhưng đây là mã mà đáp ứng của bạn yêu cầu.

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

sống Ví dụ-http://jsfiddle.net/NpNFh/

0

Bạn có thể sử dụng hai biến thể về cú pháp cho thuộc tính tàn tật, tùy theo phiên bản của HTML bạn đang nhắm mục tiêu:

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

Bạn có thể sử dụng code.Let sau ta hãy xem xét bạn có ba lựa chọn hộp như sau

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

và chức năng hãy lựa chọn 'là lập luận hiện đang sử dụng sau

$('.sel_box option[value="'+opt+'"]').attr("disabled", true); 
Các vấn đề liên quan