jQuery - 禁用後選擇

我試圖創建一些下拉菜單，其值取決於以前的選擇。我想要實現的是讓所有後面的選擇被禁用，如果前一個沒有選擇的值。jQuery - 禁用後選擇

說別人從第一個，第二個和第三個選擇了一個選項 - 然後從第一個選擇了一個空白值 - 我希望所有後續的 - 不管有多少 - 再次變爲禁用。

我收集表格中的所有選擇：

var sels = obj.closest('form').find('input[type="select"]');

我想，也許我應該得到一個選擇的索引，然後禁用所有其他指標，但不太知道該怎麼辦它。

這裏的結構形式：

<form action="" method="post"> 

<select name="option-1" id="option-1"> 
    <option value="">Select one</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
</select> 


<select name="option-2" id="option-2"> 
    <option value="">----</option> 
</select> 

<select name="option-3" id="option-3" disabled="disabled"> 
    <option value="">----</option> 
</select> 

</form>

現在 - 我知道如何讓他們 - 我只需要找出如何當用戶更改菜單值中的一個空白禁用所有相關的人。

來源

2011-09-23 user398341

我懷疑.find（'input [type =「select」]'）會給你選擇，選擇不是'input'元素。你應該使用.find（'select'）;而不是 – Sander

有jQuery中一個偉大的函數調用：nextAll();

當你編寫事件處理程序來選擇下面的字段時，你可以跳到下一個選擇這個函數並禁用它們。

$("select").change(function(){ 
    $("select").removeAttr("disabled"); 
    if($(this).val()==0){ 
    $(this).nextAll().attr("disabled","disabled"); 
    } 
});

您只需要正確指定您想要影響哪個select即可。

來源

2011-09-23 07:41:53 avall

太棒了 - 正是我在找的東西。非常感謝！ – user398341

你可以看看已經處理你的問題的jquery插件。有關示例，請參見jquery plugin page。

然而，如果你想在選擇前一個，你可能會更好，使選擇：

停用所有選擇在第一。
啓用第一個在頁面加載時（或者你的代碼中，這取決於如何建立您的HTML）
使以下與.change()事件和正確的選擇器中選擇（取決於你的HTML代碼（因此你沒有貼吧，我們幫不了你更多）

來源

2011-09-23 07:34:50 JMax

對不起 - 只是將表格結構添加到我的文章。 – user398341

@ user398341：謝謝。實際上，詹姆斯的回答非常明確，應該符合你的需求:) – JMax

考慮下面的HTML：

<select> 
    <option value="0">-Choose-</option> 
    <option value="1">Valid option</option> 
</select> 
<select> 
    <option value="0">-Choose-</option> 
    <option value="1">Valid option</option> 
</select> 
<!-- As many selects as you like -->

以下的jQuery壽ld work：

var sels = $("select"); 
sels.not(":first").prop("disabled", true); 
sels.change(function() { 
    if($(this).val() !== "0") { 
     $(this).next().prop("disabled", false); 
    } 
    else { 
     $(this).nextAll("select").val("0").prop("disabled", true); 
    } 
});

你可以看到它在行動here。它只是禁用除第一個以外的所有內容，將一個change事件綁定到所有這些事件，並在事件處理程序中檢查是否選擇了有效值。如果是這樣，它將啓用下一個select。如果不是，則禁用它。請注意，.prop要求jQuery版本至少1.6。如果您必須使用舊版本，則可以安全地使用.attr。

來源

2011-09-23 07:35:25

感謝詹姆斯 - 這不太對，因爲當你選擇所有這些，然後將第一個菜單改爲空白 - 只有第二個菜單變爲空白 - 其他人保持不變。 – user398341

啊，非常真實。你應該可以很容易地修改它來做到這一點。只需禁用所有後續的'select'元素，而不是'else'塊中的'nextSel'。 –

@ user398341 - 我已經更新了代碼和小提琴，現在就試試吧。 –

這方面有幾個要素，首先，你可以找出當前改變選擇的指數是通過使用.index^docs方法。

$('select').change(function(){ 
    var $this = $(this); 
    // find the index of the changed selects within all selects 
    var index = $('select').index($this); 
})

其次，您可以禁用使用gt()^docs選擇以下所有選擇。

$('select').change(function(){ 
    var $this = $(this); 
    var index = $('select').index($this); 
    $('select:gt(' + index + ')').attr('disabled',$this.val() == ''); 

});

活生生的例子：http://jsfiddle.net/mQmfb/

來源

2011-09-23 07:41:16 Jamiec

jQuery - 禁用後選擇

回答

相關問題