Question

Is it possible to make an item disabled/not visable in a select list?
What I’m trying to accomplish is to, depending on a number of checkboxes, if they are selected, the fields should appear in the dropdown. However, I do have manditory fields that always should be in the dropdown and it should all be in a serten order.

Checkboxes:

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

DropDown:

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

The dropdown contains all the checkboxfields + a number of extra fields, that always should be there. There fore I can dynamically remove all and add depending on if it’s checked or not.
I need to do this in the UI as well. Ideally jquery somehow.
So what approch is good for this? Is there a disable option? what would otherwise be an option?

Thanks!

//MrW

Edit:
I tried to do this:

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

but that doesn’t seem to work out. I don’t know if it simply isn’t possible to hide an option, or if I’m doing it wrong.

Answer 1

I ended up doing this:

$(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();
        });
    })
});

So I store a Json Object with all the orginal fields in it, and at each checkbox click, I remove all items from the dropdown, and regenerate all the items. Then I remove the values from the dropdown depending on what checkboxes was not checked.