2010-06-28 118 views
0

是否可以在選擇列表中禁用/不可見項目? 我想要完成的是,取決於一些複選框,如果它們被選中,這些字段應該出現在下拉列表中。但是,我確實有永久應該在下拉菜單中的限定字段,它應該都是按順序排列的。可能禁用/使項目在選擇列表中不可見?

複選框:

<table class="Fields"><tr> 
    <td><%=Html.CheckBox("Field1", Model.DisplayField1, new { value = "Field1" })%> Field 1</td> 
    <td><%=Html.CheckBox("Field2", Model.DisplayField2, new { value = "Field2" })%> Field 2</td> 
    <td><%=Html.CheckBox("Field3", Model.DisplayField3, new { value = "Field3" })%> Field 3</td> 
</tr><tr> 
    <td><%=Html.CheckBox("Field4", Model.DisplayField4, new { value = "Field4" })%> Field 4</td> 
    <td><%=Html.CheckBox("Field5", Model.DisplayField5, new { value = "Field5" })%> Field 5</td> 
    <td><%=Html.CheckBox("Field6", Model.DisplayField6, new { value = "Field6" })%> Field 6</td> 
</tr></table> 

下拉:

<table cellpadding="0" cellspacing="0"> 
    <tr> 
     <td>Sort 1</td> 
     <td><%= Html.DropDownList("drpSortColumn1", (SelectList)ViewData["SortColumns"])%></td> 
    </tr> 
</table> 

下拉包含了所有的checkboxfields +一些額外的字段,總是應該在那裏。因此,我可以動態刪除所有並添加取決於如果它被檢查或不。 我需要在UI中執行此操作。莫名其妙地理想jquery。 那麼對此有什麼好處呢?有禁用選項嗎?否則會是一種選擇?

謝謝!

// MRW

編輯: 我試着這樣做:

$('#drpSortColumn1 option[value=' + val + ']').hide(); 

,但似乎並沒有工作了。我不知道是不是可以隱藏一個選項,或者如果我做錯了。

回答

0

最後我做這個:

$(document).ready(function() { 
    $('.Fields input[type=checkbox]:checked').click(function() { 

     $('#drpSortColumn1').children().remove(); 

     jQuery.each(fields, function(val, name) { 
      $('#drpSortColumn1').append('<option value="' + val + '">' + name + '</option>') 
     }); 

     $('.Fields input:checkbox:not(:checked)').each(function() { 
      $('#drpSortColumn1 option[value=' + $(this).val() + ']').remove(); 
     }); 
    }) 
}); 

因此,我存儲一個Json對象,其中包含所有原始字段,並在每個複選框單擊時,從下拉列表中刪除所有項目,並重新生成所有項目。然後根據未選中的複選框刪除下拉列表中的值。

0

看看這裏,我想這就是你要找的內容:jQuery disable SELECT options based on Radio selected (Need support for all browsers)

你可以有你自己的訂單,只要在合適的條件,我認爲它應該統治;)

乾杯^^

編輯:好吧,這不是你的情況非常方便所以這裏有一些線索:

  • 嘗試使用盡可能d禁用屬性由CuSS規定,這將是最低成本和難以設置。但它有一個主要的缺點,即該選項不能被隱藏,即使它不再可選。顯示:沒有選項只適用於我記得的FF。

  • 如果你準備編寫大量的代碼,你可以刪除並通過影響他們的ID來記住他們爲了他們像

    ... ... 等字段添加..

你必須有兩次相同的選擇,一個在顯示:none div,「默認」選擇包含所有選項,我們不會操縱。

然後如果你想隱藏一個選項,你可以在第一個選擇中刪除它。當你想把它放回去,並創建一個帶兩個參數的函數插入選項:一個用於標識select(select1,select2,select3 ....不知道你是怎麼得到的),另一個用於行)你想插入(數組似乎是最好的)。

然後你在正確的選擇中正確的位置克隆選擇的,它應該做的伎倆,至少這是我看到的唯一的解決方案,如果你不想一直重新創建它,並保持正確訂購。告訴我,如果這還不清楚,但我希望這有助於;)

+0

不是真的,因爲該示例似乎與預定義的列表一起使用,應該啓用和禁用。我可以有多達20個可選字段,並且都可以打開或關閉(+我的manditory字段)。那意味着我需要用每一個可能的解決方案來創建詞典?! – MrW 2010-06-28 08:58:20

+0

這就是我正在考慮的,因爲無論如何,如果你想保持正確的順序,你必須做這樣的事情。隱藏()確實不適用於選項。我不確定是否有「輕量級」解決方案。但是如果有人有一個更好的主意,(禁用屬性不是完全跨瀏覽器,但如果你不需要IE6的支持,它可以做到這一點,因爲該選項將不可選)。 – 2010-06-28 09:06:18

+0

那麼,目前在總共25個領域中進行了簡要介紹,而且很可能在未來更多,這將會或多或少地不可能保持這種方式。恐怕這不是一個選擇。也聽起來像這樣會很慢,檢查我現在有什麼組合,然後加載正確的值。 – MrW 2010-06-28 10:19:32

1

變化:

$('#drpSortColumn1 option[value=' + val + ']').hide(); 
$('#drpSortColumn1 option[value=' + val + ']').show(); 

到:

$('#drpSortColumn1 option[value=' + val + ']').attr('disabled','disabled'); 
$('#drpSortColumn1 option[value=' + val + ']').attr('disabled',''); 

或:

$('#drpSortColumn1 option[value=' + val + ']').attr('disabled',true); 
$('#drpSortColumn1 option[value=' + val + ']').attr('disabled',false); 
+0

我試過了殘疾人,但問題在於它無論如何都出現在列表中。我基本上完成了這個工作:存儲一個包含所有原始項目的Json對象,併爲每個複選框檢查,清除下拉列表,重新生成它,然後刪除未選中的值。 – MrW 2010-06-28 13:32:08

+0

這將消耗更多,並且如果用戶已經選擇了包含在下一個新選擇中的選擇,則用戶將失去他所選擇的選項。跳你明白,對不起我的英語 – CuSS 2010-06-28 14:17:53

相關問題