Question

我有一个表单，我想在其中启用SKU（删除已禁用），仅当Product Id具有某个值时。如果Product 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');
}

以下是DEMO

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

1 个答案: