Hello Reader's if you have desing the html web form where you want to put the select box dissable if no option is selected.

So let's start with the html form and its code will go like this:-

<form name="sell" id="sell" method="post" action="http://tajerlee.com/userSite/sell_part2/27">
          <p>Choose a category for your listing.</p>
          <div class="topBookListLeft">
            <div class="clearfix">
              <span class="numberEdit">1</span>
               <select onchange="fetchsubcategory_list(this.value)" name="category_list" id="category_list" required = "" class="blockEdit topBookListblocks" size="7">

                                     <option value="31">Cars</option> Cars                                <option value="32">Motorbikes</option> Motorbikes                                <option value="42">Buses</option> Buses                                <option value="45">Trucks</option> Trucks                         
                
            </select>
            </div>
            
            <div class="clearfix">
              <span class="numberEdit numberEdit2">2</span>
              <select name="subcategory_list" id="subcategory_list" class="blockEdit topBookListblocks" onchange="fetchsublistings(this.value)" size="7" >
             
            </select>
            </div>
            
            <div class="clearfix">
              <span class="numberEdit numberEdit2">3</span>
             <select name="sublistings" id="sublistings" class="blockEdit topBookListblocks" onchange="populate(2)" size="7" >
               
            </select>
            </div>
            <p><button type="submit" value="submit" class="btn btn-default nxtBtnEdit">Next ></button></p>
           </form>

In the code above you can see the first select box its written

onchange="fetchsubcategory_list(this.value)"

So on changing the value the select box below it will fetch the  subcategory under current category, and if no sub category is found then the blank option will be shown and select box will dissabled. By making the selectbox dissabled developer can ensure that form will not pass the blank id, However the blank option is to inform user that no further category is found.

So the final part of Jquery and it's code will go like this:-

<script type="text/javascript">
function fetchsubcategory_list (val) {
//  alert(val);
var make_options;

    jQuery.ajax({
      url: webUrl+"userSite/fetchsubcategory_list",
      data:{ 'id': val },
      type: "POST",
      dataType:"json",
        success:function(getResponse) {
        console.log(getResponse.length);

        if(getResponse.length >0 ) {
     
        for (var i = 0; i<getResponse.length; i++)
{
        //console.log(subcategory);
          make_options = make_options+'<option  value = "'+getResponse[i].id+'" selected="" >'+getResponse[i].category_name+'</option>'; 
        }
         html_syntax = '<select onChange = fetchsublistings(this.value)  name = "make" >'+make_options+'</select>';
        
          //var length = getMakeModel.length; 
          $('#subcategory_list').html(html_syntax);
          $('#subcategory_list').prop('disabled', false);
         
        } else {
         

          $('#subcategory_list').html('<option>--no subcategory--</option>');
          $('#sublistings').html('<option>--no subcategory--</option>');

          $('#subcategory_list').prop('disabled', 'disabled');
          $('#sublistings').prop('disabled', 'disabled');
        }
         
      }
    });

}
</script>

<script type="text/javascript">
function fetchsublistings (val) {
//  alert(val);
var make_options;

    jQuery.ajax({
      url: webUrl+"userSite/fetchsubcategory_list",
      data:{ 'id': val },
      type: "POST",
      dataType:"json",
        success:function(getResponse) {
        console.log(getResponse.length);

        if(getResponse.length >0 ) {
     
        for (var i = 0; i<getResponse.length; i++)
{
              console.log(getResponse[i].category_name);
        //console.log(subcategory);
          make_options = make_options+'<option  value = "'+getResponse[i].id+'" selected="">'+getResponse[i].category_name+'</option>'; 
        }
         html_syntax = '<select  name = "model" >'+make_options+'</select>';
         $('#sublistings').prop('disabled', false);
        
          //var length = getMakeModel.length; 
          $('#sublistings').html(html_syntax);
        } else {
                    $('#sublistings').prop('disabled', 'disabled');         
          $('#sublistings').html('<option>--no subcategory--</option>');
        }
        
      }
    });

}
</script>

Now the output you can see in the picture below:-