Jquery切換選擇窗體控件禁用狀態？

Question

我有一個3下拉的表單，我想逐步切換禁用狀態。我想先禁用第二和第三個下拉菜單，當用戶從第一個選項中選擇一個選項時，第二個選項被啓用，第二個選項被選中時我希望第三個選項被啓用。

如何使用jquery做到這一點？由於

下面是代碼：

<select name="type" id="select1" style="width:200px" onchange="populate(1);"> 
<option value="" selected="selected">Select Option 1</option> 
<option value="first">First</option> 
<option value="second">Second</option> 
<option value="third">Third</option> 
</select> 
<br /><br /> 
<select name="make" id="select2" style="width:200px" onchange="populate(2);"disabled="disabled"> 
<option value="">Select Option 2</option> 
<option value="first2">First</option> 
<option value="second2">Second</option> 
<option value="third2">Third</option> 
</select> 
<br /><br /> 
<select name="model" id="select3" style="width:200px" onchange="Go(this);"disabled="disabled"> 
<option value="">Select Make</option> 
<option value="first3">First</option> 
<option value="second3">Second</option> 
<option value="third3">Third</option> 

Answer 1

你可以用一個簡單的nextAll()這樣做：

$('select').change(function(){ 
    $(this).nextAll('select:first:disabled').prop('disabled',false); 
}) 

例如：http://jsfiddle.net/niklasvh/uFzbX/

Answer 2

試試這個：

$(function(){ 
    $("#select1").change(function(){ 
     if($(this).val() == ""){ 
      $("#select2").attr("disabled", true); 
      $("#select2").val(""); 
      $("#select2").change(); 
     } else { 
      $("#select2").attr("disabled", false); 
     } 
    }); 

    $("#select2").change(function(){ 
     if($(this).val() == ""){ 
      $("#select3").attr("disabled", true); 
      $("#select3").val(""); 
     } else { 
      $("#select3").attr("disabled", false); 
     } 
    }); 
}); 

工作例如@

http://jsfiddle.net/djajg/

Answer 3

您需要設置事件處理程序，以便在前兩個<select>字段發生更改時刪除禁用功能。類似這樣的：

$(document).ready(function(){ 
    $('#select1').change(function(){ 
     if ($(this).val() != '') 
      $('#select2').removeAttr('disabled'); 
    }); 
    $('#select2').change(function(){ 
     if ($(this).val() != '') 
      $('#select3').removeAttr('disabled'); 
    }); 
}); 

查看工作演示here。 注意：使用onchange有時會導致IE中意外的行爲。您可能需要使用onclick（即，jQuery中的.click(function())）。

Answer 4

$('#select1').change(function() { 
    if($(this).val() != "") { 
     $('#select2').removeAttr('disabled'); 
    } else { 
     $('#select2').attr('disabled', 'disabled'); 
    } 
}) 

...等。

我假設你可能想要重新初始化其他選擇，如果初始狀態被重新選擇。

Answer 5

我已經採取了略微不同的方法給了別人，用index()：

$('select').change(
    function(){ 
     var i = $(this).index('select'); 
     $('select').eq(i+1).removeAttr('disabled'); 
    }); 

JS Fiddle demo。

因爲你必須<br />元素作爲兄妹到select元件，我提供的選擇器index()方法，根據指定的選擇器，發現該元件的index()，而不是在所有（或所有兄弟姐妹）元素。

參考文獻：

• change()，
• eq()，
• index()，
• removeAttr()。

Answer 6

我通過絕不一個jQuery的專家，所以有可能是一個更好的方式來做到這一點。但我寫了一個簡單的函數（我相信這是一個真正的超級簡單的jQuery插件）是這樣的：

jQuery.fn.disabled = function (tf) { 
    $('input,textarea,checkbox,select',this).attr('disabled',tf); 
    if (tf) 
     this.addClass('disabled'); 
    else 
     this.removeClass('disabled'); 
    return tf; 
} 

然後就可以調用$禁用（false）當選擇（「＃選擇2」）選擇1。 。即：

$(document).ready(function(){ 
    $('#select1').change(function(){ 
     $('#select2').disabled($(this).val() == ''); 
    }); 
    $('#select2').change(function(){ 
     $('#select3').disabled($(this).val() == ''); 
    }); 
}) 

的.disabled（）函數的優點是雙重的： 1）禁止和未禁止的基礎上，傳遞給它的布爾值，所以你不需要複製「應該啓用還是禁用？」到處都是邏輯2）它也「灰色」的文本，所以如果你想包裝你的一個或一些描述性的文字，你可以調用包裝元素的功能，文本將變灰，隨着禁用選擇（或任何其他輸入元素）。

爲了使灰色文本正常工作，您還需要CSS中的「禁用」類。我很簡單：

.disabled { 
    color: #808080; 
} 

你可能想要不同的東西來匹配你自己的主題。