Disable other listboxes unless the user have selected on the first listbox

Question

How am I going to disable my other listboxes unless the user have chose from my first listbox?

 <asp:DropDownList ID="ddlLead1" runat="server">
                                <asp:ListItem Text="-Please Select-" Selected="True" Value="-Please Select-"/>
                                <asp:ListItem Text="Type 1" Value="Category 1" />
                                <asp:ListItem Text="Type 2" Value="Category 2" />
                                <asp:ListItem Text="Type 3" Value="Category 3" />
                             </asp:DropDownList>

 <asp:DropDownList ID="ddlLead2" runat="server">
                                <asp:ListItem Text="-Please Select-" Selected="True" Value="-Please Select-"/>
                                <asp:ListItem Text="Type 1" Value="Category 1" />
                                <asp:ListItem Text="Type 2" Value="Category 2" />
                                <asp:ListItem Text="Type 3" Value="Category 3" />
                             </asp:DropDownList>

<asp:DropDownList ID="ddlLead3" runat="server">
                                <asp:ListItem Text="-Please Select-" Selected="True" Value="-Please Select-"/>
                                <asp:ListItem Text="Type 1" Value="Category 1" />
                                <asp:ListItem Text="Type 2" Value="Category 2" />
                                <asp:ListItem Text="Type 3" Value="Category 3" />
                             </asp:DropDownList>

I tried it with jquery but it isn't working. Can someone help with this?

Answer 1

$('#ddl1').change(function(){
    var ddl1=$(this);
    var ddl2=$('#ddl2');
  var ddl3=$('#ddl3');
    if (ddl1.val()!=-1){ddl2.removeAttr('disabled');ddl3.removeAttr('disabled');}
    else{ddl2.attr('disabled','disabled').val(0);ddl3.attr('disabled','disabled').val(0);}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select id="ddl1" class="ddl">
    <option value="-1">choose</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select id="ddl2" class="ddl" disabled="disabled">
    <option value="0">choose</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select id="ddl3" class="ddl" disabled="disabled">
    <option value="0">choose</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>