How to disable a dropdown which is in span --- Jquery

Question

Hi i have a Dropdown

       <div class="dvPortOmmisionRightInner">
        <div style="float: left">
             <select id="ddlAction" onchange="showSelected(this.value)">
                <option value="-1" selected="selected"> </option>
                <option value="1">Indirect Call</option>
                <option value="2">Cargo Diversion</option>
                <option value="3">Cargo Rollover</option>
                <option value="4">Shift Cargo</option>
            </select>
        </div>
    </div>

    <div class="dvOmmisionPortinner">

       <p>Service</p>
        <span class="ShowSpan1" style="float: left">
            <asp:DropDownList ID="ddlService" runat="server" ClientIDMode="Static" CssClass="ddlService"></asp:DropDownList>
        </span>

        <p>Voy</p>
        <span style="float: left" class="ShowSpan2">
            <select id="ddlVoy" name="ddlVoy" class="ddlVoy"></select>
        </span>

Here based on selection of Select i must disable few Dropdowns ...,

First when i click on Indirect Call my ddlService dropdown must be disabled..

    var myDivs = new Array(1, 2, 3, 4);

    function showSelected(sapna) {
        var t = 'ShowSpan' + sapna,
            r, dv;
        r = 'ShowSpan' + myDivs;

        dv = document.getElementById(r);
        if (dv) {
            if (t === r) {
                        // Here my ddlService must get Disabled...


           }
          } else {
                dv.style.display = 'none';
            }
        }
        return false;
    }

Is there any other way to disable Dropdown based on Selection value???

When iam trying to diable this dropdon it is not getting disabled.

My Trials are like

    $("#ddlService").attr("disabled", true);
    $("#ddlService").attr("disabled", "disabled");
    $(".ShowSpan1").attr('readonly', true);
    $(".ShowSpan1").attr("disabled", "disabled");

When i disable my SPAN its getting into Readonly but still i can access Dropdown Is there any other way to Disable a Dropdown?

Thanks in Advance

Answer 1

 $(".ddlService").prop("disabled", true);

I have made test also for my answer and its working

Designer page html as follow

 <span class="ShowSpan1" style="float: left">
            <asp:DropDownList ID="ddl" runat="server" CssClass="ddlservice">
                <asp:ListItem Text="1" Value="1"></asp:ListItem>
                <asp:ListItem Text="2" Value="2"></asp:ListItem>
                <asp:ListItem Text="3" Value="3"></asp:ListItem>
                <asp:ListItem Text="4" Value="4"></asp:ListItem>
            </asp:DropDownList>
        </span>

and Jquery code for disable that dropdown as follow.

 <script type="text/javascript">

        $('document').ready(function() {

            $(".ddlservice").prop("disabled", true);
            return false;


        });
  </script>

AS OP edited question and now there is disable dropdowns on value of above selected dropdown so my edited answer as follows :

<div class="dvPortOmmisionRightInner">
        <div style="float: left">
             <select id="ddlAction">
                <option value="-1" selected="selected"> </option>
                <option value="1">Indirect Call</option>
                <option value="2">Cargo Diversion</option>
                <option value="3">Cargo Rollover</option>
                <option value="4">Shift Cargo</option>
            </select>
        </div>
    </div>

    <div class="dvOmmisionPortinner">

       <p>Service</p>
        <span class="ShowSpan1" style="float: left">
              <select id="ddlService" name="ddlService" class="ddlService">
                <option value="1">Service</option>

              </select>
        </span>

        <p>Voy</p>
        <span style="float: left" class="ShowSpan2">
            <select id="ddlVoy" name="ddlVoy" class="ddlVoy">
                <option value="1">Voy</option>
            </select>
        </span>

and jquery for this

$('documnent').ready(function(){
    $('#ddlAction').change(function(){
        var action=$("#ddlAction option:selected").val();
        alert(action);
        if(action==1)
        {
            $('#ddlService').prop('disabled','true');
        }
        else if (action==2)
        {
            $('#ddlVoy').prop('disabled','true');
        }

    });
});

JS FIDDLE LINK

Answer 2

Use ClientIDMode="Static" for a dropdown control. It is not working because when the page gets rendered, the server side control ids are changed dynamically and differ machine to machine.

Answer 3

$('span.ShowSpan1').find('*').attr('disabled',true);

Try this it will disable all element in your span