how to disable the multiple selection from the list box using jquery? or javascript?

Question

I have a list box in my page..

<td><%=Html.ListBox("listServiceTypes", Model.ServiceTypeListAll, new { style = "width: 500px;height:200px;" })%>

I need to disabled selecting multiple items from the list box? I am doing something like selecting one item and click delete button my page its delting one item from list box.. but If I select multple Items its throwing an error message/.?

Can any body help me out how to deactive or disable multiple items from list box

Aromatize

does this ASP generate a <select multiple>... if so, just call $('#mySelect').removeAttr('multiple'); – Hadfield

Answer 1

You could do that with the following jQuery:

$(function(){
  $("select[name='listServiceTypes']").removeAttr('multiple');
});

However, it would be much better to do it at the server side. Rather than using Html.ListBox, it would be better to use Html.DropDownList:

<%=Html.DropDownList("listServiceTypes", 
                Model.ServiceTypeListAll, 
                new { style = "width: 500px;height:200px", size=4 }); %>

This removes the need from having to do any jQuery/JavaScript to remove the multiple attribute as it produces pretty much the same HTML but without the multiple attribute. Having a value for size that is greater than 1 tells the browser to display it as a multi-line list box.

Edema

Answer 2

This script will turn off multiple selection for all select controls on the page.

<script type="text/javascript">
    $(document).ready(function () {
        $('select').removeAttr('multiple');
    });
</script>

Bari

Answer 3

I wanted to get a listbox with single select and not a dropdown list. This got me exactly that. Basically get the ListBoxFor added with size > 1 and then remove multiselect using jQuery.

JS part:

<script type="text/javascript">
    $(function () {
        $(document).ready(function () {
            $('.NoMultiSelect').removeAttr('multiple');
        });
    });
</script>

html part:

@Html.ListBoxFor(m => Model.SelectedItems, Model.AllItems, new {  @class = "NoMultiSelect form-control", size = 4, style = "width: 250px; height: 300px;" })

Lorolla