时间戳

首页 > 解决方案 > 如何在 HTML 中的任何位置自动调用 JavaScript 方法？

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

问题描述

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

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;
  }
}

标签： javascripthtmljqueryfunctiononclick

解决方案

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

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

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

该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>

推荐阅读