2009-05-18 22 views
34

OK có một chút rắc rối ở đây, muốn tắt một số tùy chọn khi chọn một đài. Khi ABC được chọn vô hiệu hóa các tùy chọn 1,2 & 3, v.v ...jQuery vô hiệu hóa các tùy chọn SELECT dựa trên Radio được chọn (Cần hỗ trợ cho tất cả các trình duyệt)

$("input:radio[@name='abc123']").click(function() { 
    if($(this).val() == 'abc') { 

     // Disable 
     $("'theOptions' option[value='1']").attr("disabled","disabled"); 
     $("'theOptions' option[value='2']").attr("disabled","disabled"); 
     $("'theOptions' option[value='3']").attr("disabled","disabled"); 

    } else { 
     // Disbale abc's 
    }  
}); 

ABC: <input type="radio" name="abc123" id="abc"/> 
123: <input type="radio" name="abc123" id="123"/> 

<select id="theOptions"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
</select> 

Không làm việc gì?

CẬP NHẬT:

Ok Tôi đã bật/tắt hoạt động nhưng đã xảy ra sự cố mới. Các tùy chọn vô hiệu hóa cho hộp chọn của tôi chỉ hoạt động trong FF và IE8. Tôi đã thử nghiệm IE6 và người tàn tật không hoạt động. Tôi đã cố gắng sử dụng hide() và show() mà không có may mắn. về cơ bản tôi cần phải ẩn/tắt/xóa các tùy chọn (cho tất cả các trình duyệt) và có thể thêm chúng trở lại nếu tùy chọn radio khác được chọn và ngược lại.

KẾT LUẬN:

Cảm ơn tất cả các giải pháp, hầu hết tất cả đều trả lời câu hỏi ban đầu của tôi. Nhiều PROPS cho tất cả :)

+0

Một giải pháp cho vấn đề này: http://stackoverflow.com/questions/7553880/ipad-disable-select-options-wo- jquery/9914179 # 9914179 – standup75

Trả lời

72

Cách thích hợp để đạt được các chức năng mà bạn muốn chỉ là để loại bỏ các tùy chọn. Khi bạn phát hiện ra một cách khó khăn, vô hiệu hóa các tùy chọn riêng lẻ không được hỗ trợ đặc biệt tốt trên các trình duyệt. Tôi chỉ thức dậy và cảm thấy như lập trình một cái gì đó vì vậy tôi whipped lên một plugin nhỏ để dễ dàng lọc một lựa chọn dựa trên thuộc tính ID được lựa chọn của một đài phát thanh. Mặc dù phần còn lại của giải pháp sẽ hoàn thành công việc, nếu bạn đang lên kế hoạch thực hiện điều này trong suốt ứng dụng, điều này sẽ hữu ích. Nếu không, thì tôi đoán đó là vì bất cứ ai khác tình cờ gặp điều này. Đây là mã Plugin bạn có thể giấu đi đâu đó:

jQuery.fn.filterOn = function(radio, values) { 
    return this.each(function() { 
     var select = this; 
     var options = []; 
     $(select).find('option').each(function() { 
      options.push({value: $(this).val(), text: $(this).text()}); 
     }); 
     $(select).data('options', options); 
     $(radio).click(function() { 
      var options = $(select).empty().data('options'); 
      var haystack = values[$(this).attr('id')]; 
      $.each(options, function(i) { 
       var option = options[i]; 
       if($.inArray(option.value, haystack) !== -1) { 
        $(select).append(
        $('<option>').text(option.text).val(option.value) 
        ); 
       } 
      }); 
     });    
    }); 
}; 

Và đây là làm thế nào để sử dụng nó:

$(function() { 
    $('#theOptions').filterOn('input:radio[name=abc123]', { 
     'abc': ['a','b','c'], 
     '123': ['1','2','3']   
    }); 
}); 

Đối số đầu tiên là một chọn cho nhóm phát thanh, thứ hai một cuốn từ điển nơi các khóa là ID radio để khớp và giá trị là một mảng các giá trị tùy chọn được chọn sẽ vẫn còn. Có rất nhiều thứ có thể được thực hiện để tóm tắt thêm điều này, hãy cho tôi biết nếu bạn quan tâm và tôi chắc chắn có thể làm điều đó.

Here is a demo of it in action.

EDIT: Ngoài ra, quên để thêm, theo quy định của jQuery documentation:

Trong jQuery 1.3 [@attr] selectors phong cách đã được gỡ bỏ (họ trước đó bị phản đối trong jQuery 1.2). Chỉ cần xóa biểu tượng '@' khỏi bộ chọn của bạn để làm cho chúng hoạt động trở lại.

+0

Đây chính xác là những gì tôi cần, Cảm ơn một tấn !!! Một câu hỏi cuối cùng, điều này có đi vào bên trong tài liệu hay không? –

+2

Mã plugin có thể nằm ngoài nó, miễn là nó đi sau khi jQuery được đưa vào. Mã gọi nó nên đi vào bên trong tài liệu sẵn sàng như tôi có nó hoặc ở dưới cùng của tài liệu. –

+0

Cảm ơn. Okay Điều cuối cùng. Tôi đã sử dụng một ví dụ như một phần của mã của tôi để RegEx không hoạt động như mong đợi. Tôi có bốn giá trị cho các opiotns: BGE BGE_KKI Oke MYF Và Đài phát thanh của tôi là P và S Tôi đang cố gắng này, nhưng không may mắn: 'P':/('BGE' | 'BGE_KKI' | 'OKE') /, 'S':/('MYF')/ –

1

bạn đang sử dụng trình duyệt nào? Tôi chưa bao giờ sử dụng nó trước đây nhưng nó có vẻ không được hỗ trợ trong IE trước IE8. Xem liên kết này để biết thêm thông tin:

http://www.w3schools.com/TAGS/att_option_disabled.asp

+0

Tôi sẽ phải xem xét điều này. Tôi đang sử dụng FF3 nhưng vẫn cần phải kiểm tra IE [6-8] –

+0

WOW điểm tốt. hoạt động trong IE8 nhưng không có trong IE6.Làm việc xung quanh? –

+0

Một vấn đề khác, YIKES! Nhìn vào vấn đề gốc + EDIT. Cảm ơn :) bất kỳ suy nghĩ nào khác? –

0

chọn của bạn là sai. Thay vì

$("'theOptions' option[value='1']") 

bạn nên sử dụng

$("#theOptions > option[value='1']") 

Xem thêm jQuery selectors documentation. Và hãy xem suggestion bởi aman.tur.

+0

Một vấn đề khác, YIKES! Nhìn vào vấn đề gốc + EDIT. Cảm ơn :) –

3

vấn đề đầu tiên là với

$(this).val() 

thay thế nó với

$(this).attr('id') == 'abc' 

thì điều này sẽ không làm việc

$("'theOptions'..") 

sử dụng

$("#theOptions option[value='1']").attr('disabled','disabled') //to disable 
$("#theOptions option[value='a']").attr('disabled','') //to ENABLE 
+0

Điều này đang hoạt động nhưng có một câu hỏi tiếp theo. Làm cách nào để chọn tùy chọn ENABLED? –

+0

Phill nếu bạn có nghĩa là làm thế nào để bạn kích hoạt tùy chọn dòng cuối cùng (kết thúc bằng bình luận // để kích hoạt) làm các trick. Nếu không thì tôi không hiểu: ( – TheVillageIdiot

+0

Tôi thấy điều đó, nhưng điều tôi muốn là chọn một trong các tùy chọn bật trong trình đơn thả xuống. Khi tắt tùy chọn, tùy chọn được chọn vẫn được bật ngay cả khi nó đã bị vô hiệu hóa, cho đến khi bạn chọn một tùy chọn được kích hoạt, thì bạn không thể chọn lại nó. Xin lỗi vì điều này có ý nghĩa? Vì vậy, nếu tôi vô hiệu hóa abs và tùy chọn được chọn trước trên a a vẫn được kích hoạt cho đến khi tôi chọn lại –

0

Nếu bạn muốn vô hiệu hóa một số tùy chọn, so với các mã dưới đây nên làm việc

$("input:radio[name='abc123']").click(function() { 
    var value = $(this).val(); 

    $("option[value='1'], option[value='2'], option[value='3']", "#theOptions").each(function(){ 
     this.disabled = value == 'abc'; 
    }); 
    $("option[value='a'], option[value='b'], option[value='c']", "#theOptions").each(function(){ 
     this.disabled = value == '123'; 
    }) 
}); 

và radio-nút

ABC: <input type="radio" name="abc123" value="abc" id="abc"/> 
123: <input type="radio" name="abc123" value="123" id="123"/> 

Nếu bạn muốn loại bỏ các tùy chọn từ danh sách lựa chọn, vì sử dụng mã này

$(function(){ 
    var options = null; 
    $("input:radio[name='abc123']").click(function() { 
     var value = $(this).val(); 
     if(options != null)options.appendTo('#theOptions'); 
     if(value == 'abc') 
     options = $("option[value='1'], option[value='2'], option[value='3']", "#theOptions").remove(); 
     else if(value == '123') 
     options = $("option[value='a'], option[value='b'], option[value='c']", "#theOptions").remove(); 
    }); 
}); 

BTW. mã của tôi sử dụng bản phát hành ổn định hiện tại của jQuery (1.3.2). Nếu bạn đang sử dụng bản phát hành cũ hơn, bạn sẽ cần phải thay đổi bộ chọn thuộc tính thành cú pháp cũ.

tùy chọn [= giá trị '1'] để lựa chọn [@ = giá trị '1']

+0

Tôi nhận được 'attr is not xác định 'lỗi –

+0

lạ. Làm việc cho tôi – Rafael

+0

Một vấn đề khác, YIKES! Nhìn vào vấn đề gốc + EDIT. Cảm ơn :) –

17

Bạn muốn một cái gì đó như thế này - Example Code here

$(function() { 

$("input:radio[@name='abc123']").click(function() { 
    if($(this).attr('id') == 'abc') { 

     // Disable 123 and Enable abc 
     $("#theOptions option[value='1']").attr("disabled","disabled"); 
     $("#theOptions option[value='2']").attr("disabled","disabled"); 
     $("#theOptions option[value='3']").attr("disabled","disabled"); 
     $("#theOptions option[value='a']").attr("selected","selected"); 
     $("#theOptions option[value='a']").attr("disabled",""); 
     $("#theOptions option[value='b']").attr("disabled",""); 
     $("#theOptions option[value='c']").attr("disabled",""); 

    } else { 
     // Disable abc's and Enable 123 
     $("#theOptions option[value='a']").attr("disabled","disabled"); 
     $("#theOptions option[value='b']").attr("disabled","disabled"); 
     $("#theOptions option[value='c']").attr("disabled","disabled"); 
     $("#theOptions option[value='1']").attr("selected","selected");   
     $("#theOptions option[value='1']").attr("disabled",""); 
     $("#theOptions option[value='2']").attr("disabled",""); 
     $("#theOptions option[value='3']").attr("disabled",""); 

    }  
}); 

}); 

EDIT:

Phiên bản cải tiến của mã, sử dụng cụm từ thông dụng để lọc tùy chọn dựa trên giá trị tùy chọn. Working example here. Bạn có thể chỉnh sửa ví dụ bằng cách thêm /edit đến URL

$(function() { 

    $("input:radio[@name='abc123']").click(function() { 

     // get the id of the selected radio 
     var radio = $(this).attr('id'); 

     // set variables based on value of radio 
     var regexDisabled = radio == 'abc' ? /[1-3]/ : /[a-c]/;  
     var regexEnabled = radio == 'abc' ? /[a-c]/ : /[1-3]/; 
     var selection = radio == 'abc' ? 'a' : 1; 

     // select all option elements who are children of id #theOptions 
     $("#theOptions option") 
      // filter the option elements to only those we want to disable 
      .filter(function() { return this.value.match(regexDisabled);}) 
      // disable them 
      .attr("disabled","disabled") 
      // return to the previous wrapped set i.e. all option elements 
      .end() 
      // and filter to those option elements we want to enable 
      .filter(function() { return this.value.match(regexEnabled);}) 
      // enable them 
      .attr("disabled",""); 
     // change the selected option element in the dropdown 
     $("#theOptions option[value='" + selection + "']").attr("selected","selected"); 

    }); 

}); 

EDIT 2:

Kể từ khi thuộc tính tàn tật không xuất hiện để làm việc đáng tin cậy trên các trình duyệt, tôi nghĩ rằng lựa chọn duy nhất của bạn là để loại bỏ các các yếu tố tùy chọn không cần thiết khi chọn nút radio. Working Example here

$(function() { 

     $("input:radio[@name='abc123']").click(function() { 

      // store the option elements in an array 
      var options = []; 
      options[0] = '<option value="1">1</option>'; 
      options[1] = '<option value="2">2</option>'; 
      options[2] = '<option value="3">3</option>'; 
      options[3] = '<option value="a">a</option>'; 
      options[4] = '<option value="b">b</option>'; 
      options[5] = '<option value="c">c</option>'; 


      var radio = $(this).attr('id'); 
      var regexEnabled = radio == 'abc' ? /[a-c]/ : /[1-3]/; 

      // set the option elements in #theOptions to those that match the regular expression 
      $("#theOptions").html(
      $(options.join('')) 
       // filter the option elements to only those we want to include in the dropdown 
       .filter(function() { return this.value.match(regexEnabled);}) 
      ); 


     }); 

    }); 

hoặc thậm chí

$(function() { 

     // get the child elements of the dropdown when the DOM has loaded 
     var options = $("#theOptions").children('option'); 

     $("input:radio[@name='abc123']").click(function() {   

      var radio = $(this).attr('id'); 
      var regexEnabled = radio == 'abc' ? /[a-c]/ : /[1-3]/; 

      // set the option elements in #theOptions to those that match the regular expression 
      $("#theOptions").html(
      $(options) 
       // filter the option elements to only those we want to include in the dropdown 
       .filter(function() { return this.value.match(regexEnabled);}) 
      ); 

     }); 
    }); 
+0

Một vấn đề khác, YIKES! Nhìn vào vấn đề gốc + EDIT. Cảm ơn :) –

+0

Tôi đang thử cách này nhưng làm cách nào để thêm các phần tử đã xóa khi chọn tùy chọn khác (Giống như chuyển đổi qua lại). Tôi cũng làm cách nào để kiểm tra các bản sao? Cảm ơn một lần nữa vì tất cả sự giúp đỡ trong vấn đề này. –

+0

Được xử lý bởi kết hợp regex, hoặc dựa vào các phần tử tùy chọn trong một mảng (ví dụ mã áp chót), hoặc đối với các phần tử tùy chọn được ghi trong một biến khi DOM đã tải (ví dụ mã cuối cùng). –

0
$(":radio[name=abc123]").click(function() { 
    var $options = $("#theOptions") 
    var toggle = ($(this).val() == 'abc') ? true : false; 

    $("[value=1],[value=2],[value=3]", $options).attr("disabled", toggle); 
    $("[value=a],[value=b],[value=c]", $options).attr("disabled", !toggle); 
}); 
+0

Một vấn đề khác, YIKES! Nhìn vào vấn đề gốc + EDIT. Cảm ơn :) –

0

chỉ cần khắc phục selector $("'theOptions' option[value='1']") để $("#theOptions option[value='1']") và tất cả mọi thứ sẽ hoạt động tốt

+0

không đúng, lỗi cú pháp trong công cụ chọn – Raptor

Các vấn đề liên quan