如何在HTML中自动调用JavaScript方法，根据下拉状态控制价格输入框禁用启用

算力阿峰

2026-10-3

问题原因

你当前的逻辑仅绑定了价格输入框的点击事件作为触发条件，下拉选择框状态变更时没有执行状态判断逻辑，因此输入框无法自动同步状态。

修复方案

1. 修改HTML代码

给下拉选择框绑定change事件，状态变更时自动触发状态判断：

<div class="form-row">
   <div class="form-group col-md-6 text-center">
     <label for="cattery-status-create" th:text="#{cattery.status}"></label>
     <!-- 新增onchange事件绑定 -->
     <select id="cattery-status-create" class="form-control" onchange="setPriceInputDisabled()">
       <option th:each="status : ${catteryStatusCodeDict}" th:value="${status.code}" th:text="${status.value}"></option>
     </select>
   </div>
   <div class="form-group col-md-6 text-center">
     <label for="price-create" th:text="#{price}"></label>
     <input id="price-create" onclick="setPriceInputDisabled()"  type="number" class="form-control" max="10000" step="1">
   </div>
</div>

2. 补充初始化逻辑（可选但推荐）

在你的JavaScript代码中新增页面加载完成后的初始化调用，避免页面刚加载时状态不匹配：

// 原有判断逻辑保持不变，优化了重复DOM查询的问题
function setPriceInputDisabled(){
  const priceInput = document.getElementById("price-create");
  priceInput.disabled = false;
  const catteryStatusCode = $("#cattery-status-create").find(":selected").val();
  if (catteryStatusCode != 'S') {
    priceInput.disabled = true;
  }
}

// 新增：页面加载完成后初始化一次输入框状态
$(function(){
  setPriceInputDisabled();
})