使用jQuery禁用表單字段

Question

我有一個簡單的預訂表單，其中包含不同類型的事件。當某個事件被觸發時，被稱爲FST我希望其他字段被禁用並自動填充時間/數字。我設法弄清楚如何讓事件字段禁用，但無論我使用的是哪個select字段，它都會自動填充數字，我無法想象爲什麼。任何幫助都會很棒。

<select id="jq-Type" name="Type"> 
    <option value="PET">Pre-Employment Training</option> 
    <option value="FST">Functional Skills Testing</option> 
    <option value="ICT">ICT Testing</option> 
</select> 

<script> 
    $(document).on('change', '#jq-Type', function() { 
    var shouldEnable = $(this).val() == 'FST'; 

    $("input[name='BookingLimit']:eq(0)").val('21'); 
    $('#jq-BookingLimit').prop('disabled', shouldEnable); 
    $("select[name='StartTimeHour']:eq(0)").val('09'); 
    $('#jq-StartTimeHour').prop('disabled', shouldEnable); 
    $("select[name='StartTimeMinute']:eq(0)").val('30'); 
    $('#jq-StartTimeMinute').prop('disabled', shouldEnable); 
    $("select[name='EndTimeHour']:eq(0)").val('15'); 
    $('#jq-EndTimeHour').prop('disabled', shouldEnable); 
    $("select[name='StartTimeMinute']:eq(0)").val('00'); 
    $('#jq-EndTimeMinute').prop('disabled', shouldEnable); 
    }); 
</script> 

這裏有一個演示https://jsfiddle.net/02mv54ao/，即使我只希望定時更改FST它改變任何類型，選擇選項

Answer 1

要禁用元素只有當價值被選中的，但你無論如何，總是會改變其他元素的值。

添加「如果」做你的陳述，你很好去。

$(document).on('change', '#jq-Type', function() { 
    var shouldEnable = $(this).val() == 'FST'; 
    if (shouldEnable){ 
     $("input[name='BookingLimit']:eq(0)").val('21'); 
     $("select[name='StartTimeHour']:eq(0)").val('09'); 
     $("select[name='StartTimeMinute']:eq(0)").val('30'); 
     $("select[name='EndTimeHour']:eq(0)").val('15'); 
     $("select[name='StartTimeMinute']:eq(0)").val('00'); 
    } 
    $('#jq-BookingLimit').prop('disabled', shouldEnable); 
    $('#jq-StartTimeHour').prop('disabled', shouldEnable); 
    $('#jq-StartTimeMinute').prop('disabled', shouldEnable); 
    $('#jq-EndTimeHour').prop('disabled', shouldEnable); 
    $('#jq-EndTimeMinute').prop('disabled', shouldEnable);  
});