Home » Javascript » Disable a select box after load as well as on change

Disable a select box after load as well as on change

Posted by: admin November 1, 2017 Leave a comment

Questions:

I have a number of select boxes that set a specific start and end time when a category option is chosen. However I’ve managed to put together the function that runs with an on change event, which is great when I’m creating the event, but I want to also call it when I’m editing the same event.

    $(document).on('change', '#js_sub', function() {
    			var GetValue = $(this).val();
    			var GetSlots = GetValue.charAt(GetValue.length - 1);
      			var shouldEnable = GetSlots == 'Y';
            if (shouldEnable){
    			$("select[name='start_time_hour']:eq(0)").val('09');
    			$("select[name='start_time_minute']:eq(0)").val('30');
    			$("select[name='end_time_hour']:eq(0)").val('15');
    			$("select[name='end_time_minute']:eq(0)").val('00');
          	}
    			$('#js_start_time_hour option:not(:selected)').prop('disabled', shouldEnable);
    			$('#js_start_time_minute option:not(:selected)').prop('disabled', shouldEnable);
    			$('#js_end_time_hour option:not(:selected)').prop('disabled', shouldEnable);
    			$('#js_end_time_minute option:not(:selected)').prop('disabled', shouldEnable);
    		});



   
 <select id="#js_sub">
       <option value="01_Y">Day Slot</option>
       <option value="02_N">Anytime</option>
    </select>
    
    <select id="#js_start_time_hour">
       <option value="06">06</option>
       <option value="07">07</option>
       ...
    </select>
    
    <select id="#js_start_time_minute">
       <option value="00">00</option>
       <option value="05">05</option>
       ...
    </select>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Answers: