Question

我有一个HTML表单，如下所示：

<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>

我想做的是启用#EventPauseHour和#EventPauseMin，只要#EventStartTimeHour，＃EventStartTimeMin，＃EventFinishTimeHour和#EventFinishTimeMin都是有效数字。我希望用以下代码实现：

$('.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;
     ...
    }

当我设置所有四个下拉值时，其他两个字段不会立即启用。但是当我将所有四个下拉列表中的一个下调后的值改为有效数字时，就会启用暂停字段。

非常感谢任何帮助。

Answer 1

我会做这样的事情：（注意！未完全测试，可能需要稍加修改）

$(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();
});

使用javascript启用输入字段

1 个答案: