如何在 HTML 中的任何位置自动调用 JavaScript 方法？答案

【问题标题】：How to call JavaScript methods automatically anywhere in HTML?如何在 HTML 中的任何位置自动调用 JavaScript 方法？
【发布时间】：2021-11-10 01:16:50
【问题描述】：

我的价格输入应在选择状态后自动禁用或启用。现在它在单击输入后变为禁用状态（在错误状态下），但当我的状态良好时它不会恢复为启用状态。正确的做法是什么？

HTML：

 <div class="form-row">
   <div class="form-group col-md-6 text-center">
     <label for="cattery-status-create" th:text="#{cattery.status}"></label>
     <select id="cattery-status-create" class="form-control">
       <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>

JavaScript：

function setPriceInputDisabled(){
  document.getElementById("price-create").disabled = false;
  var catteryStatusCode = $("#cattery-status-create").find(":selected").val();

  if (catteryStatusCode != 'S') {
    document.getElementById("price-create").disabled = true;
  }
}

【问题讨论】：

if $("#cattery-status-create").val() != 'S'。并避免使用内联事件处理程序。

标签： javascript html jquery function onclick

【解决方案1】：

不确定为什么要将 JavaScript 与 jQuery 混合使用。我会使用其中一个，而不是两者。

function setPriceInputDisabled(){
  $("#price-create").prop("disabled", ($("#cattery-status-create").val() === "S"));
}

这只会在值不是“S”时启用click 事件时的输入。

click 事件似乎不是要绑定的正确回调。我怀疑您想在 Select 元素更改时修改属性。如果用户选择“S”值；输入被禁用。

$(function() {
  function setPriceInputDisabled() {
    $("#price-create").prop("disabled", ($("#cattery-status-create").val() === "S"));
  }
  $("#cattery-status-create").change(setPriceInputDisabled);
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
  <div class="form-group col-md-6 text-center">
    <label for="cattery-status-create" th:text="#{cattery.status}"></label>
    <select id="cattery-status-create" class="form-control">
      <option>A</option>
      <option>S</option>
      <option>D</option>
      <option>F</option>
      <option>G</option>
    </select>
  </div>
  <div class="form-group col-md-6 text-center">
    <label for="price-create" th:text="#{price}"></label>
    <input id="price-create" type="number" class="form-control" max="10000" step="1">
  </div>
</div>

【讨论】：