啓用表單字段依賴於另一個表單字段的值？

Question

我有一個表單，我希望啓用SKU（禁用除去），只有當產品ID有一定的價值。如果產品ID爲空，我希望SKU保持禁用狀態。

我應該將onChange事件與產品ID關聯嗎？

<div class="advancedSearchFormField"> 
     <span class="advancedSearchFormlabel">Product Id</span> 
     <%= text_area_tag('filters[product_id]',filter_params['product_id'],:rows=>10) %> 
</div> 

<div class="advancedSearchFormField"> 
     <span class="advancedSearchFormlabel">SKU</span> 
     <%= text_area_tag('filters[sku]',filter_params['sku'],:rows=>10, :disabled => true) %> 
</div> 

Answer 1

是的，您應該在您的product_id-Element中使用addEventListener。 你可以這樣來做：

(function() { 
    var product_id = document.getElementById('product_id'); 
    product_id.addEventListener('blur', triggerInput, false); 
    product_id.addEventListener('keyup', triggerInput, false); 
})(); 

function triggerInput() { 
    var sku = document.getElementById('sku'); 
    (this.value != "" ? sku.disabled = '' : sku.disabled = 'disabled'); 
} 

這裏是DEMO