Possible to disable/make item not visable in select list?

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

Take a look here, I think that's what you're looking for : http://stackoverflow.com/questions/877328/jquery-disable-select-options-based-on-radio-selected-need-support-for-all-brows

You can have your own order, just make the right conditions, and I think it should rule ;)

Cheers ^^

Edit : Ok, it's not really handy in your case so here are some leads :

• try to use the attribute disabled as described by CuSS below, it will be the least costy and difficult to set. But it has the major drawback that the option is not hidden, even though it's not selectable anymore. Display:none for options only works in FF from what I remember.

• If you're ready to write lot of code, you can remove and add the fields by affecting them an id to remember their order them something like

  ... ... etc...

You have to have twice the same select, one in a display:none div, the "default" select containing all the options, and that we won't manipulate.

Then if you want to hide an option, you can remove it in the first select. When you want to put it back, and create a function insert option with two parameters : one to identify the select (select1, select2, select3.... don't know how you got), and the other for the line(s) you want to insert (an array seems the best).

Then you clone the selected in the right places in the right select, and it should do the trick, at least that's the only solution I see if you don't want to recreate it all the time, and keep the right order. Tell me if this is unclear, but I hope this helps ;)

Answer 2

change:

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

to:

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

or:

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

Answer 3

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.