javascript - 启用依赖于另一个表单字段值的表单字段？

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

是的，您应该将 addEventListener 与您的 product_id-Element 一起使用。你可以这样做：

(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');
    sku.disabled = (this.value !== "" ? '' : 'disabled');
}

这是演示