使用javascript启用输入字段

Question

I have an HTML form which is like following:

<div class="input time"><label for="EventStartTimeHour">Start Time</label><select name="data[Event][start_time][hour]" class="autotime" id="EventStartTimeHour">
<option value=""></option>
<option value="00">0</option>
 ...
</select>:<select name="data[Event][start_time][min]" class="autotime" id="EventStartTimeMin">
<option value=""></option>
<option value="00">00</option>
 ...
</select></div><div class="input time"><label for="EventFinishTimeHour">Finish time</label><select name="data[Event][finish_time][hour]" class="autotime" id="EventFinishTimeHour">
<option value=""></option>
<option value="00">0</option>
 ...
</select>:<select name="data[Event][finish_time][min]" class="autotime" id="EventFinishTimeMin">
<option value=""></option>
<option value="00">00</option>
 ...
</select></div><div class="input time"><label for="EventPauseHour">Pause</label><select name="data[Event][pause][hour]" disabled="disabled" class="autotime" id="EventPauseHour">
<option value=""></option>
<option value="00">0</option>
 ...
</select>:<select name="data[Event][pause][min]" disabled="disabled" class="autotime" id="EventPauseMin">
<option value=""></option>
<option value="00">00</option>
 ...
</select></div>

What I want to do is to enable #EventPauseHour and #EventPauseMin, whenever #EventStartTimeHour, #EventStartTimeMin, #EventFinishTimeHour and #EventFinishTimeMin are valid numbers. This I want to achieve with the following code:

$('.autotime').on('change', function(){
    var startHour = parseInt($("#EventStartTimeHour").val());
    var startMin = parseInt($("#EventStartTimeMin").val());
    var finishHour = parseInt($("#EventFinishTimeHour").val());
    var finishMin = parseInt($("#EventFinishTimeMin").val());

    if(!isNaN(startHour) && !isNaN(startMin) && !isNaN(finishHour) && !isNaN(finishMin)){
        document.getElementById('EventPauseHour').disabled = true;
        document.getElementById('EventPauseMin').disabled = true;
     ...
    }

When I set all of the four dropdown values the other two fields are not enabled straight away. But when I change the value of one of the four dropdowns once they are all valid numbers - the pause fields are enabled.

Any help is much appreciated.

Answer 1

I would do something like this: ( Note! Not Fully Tested and may require slight modification )

$(function() {
    // rename me to something more meaningful.
    var myEnableFunction = function(event) {
        var startHour = parseInt($("#EventStartTimeHour").val());
        var startMin = parseInt($("#EventStartTimeMin").val());
        var finishHour = parseInt($("#EventFinishTimeHour").val());
        var finishMin = parseInt($("#EventFinishTimeMin").val());

        if(!isNaN(startHour) && !isNaN(startMin) && !isNaN(finishHour) && !isNaN(finishMin)){
            // rather than having to specify each item, create a class (or any kind of attribute) that you can use.
            $('.pauseEvents').attr('disabled', 'disabled');
        } else {
            // don't forget to remove the attribute so it can be used again.
            $('.pauseEvents').removeAttr('disabled');
        }
    }

    // setup the change event to call your "meaningful" function.
    $('.autotime').on('change',myEnableFunction);

    // call the "meaningful" funciton.
    myEnableFunction();
});