如何根据下拉框文本禁用提交按钮？现有代码无法正常运行

需求：当下拉框选中包含"Trial"文本的选项（比如第1、4项）时，禁用提交按钮，但当前代码无法实现该功能。

原代码存在的问题 #

• 选择器错误：JS中监听的是.inputDropdown类选择器，但HTML里下拉框的id是inputDropdown，并没有这个类，导致事件绑定失效。
• 判断逻辑错误：$("#inputDropdown").toString()获取的是jQuery对象的字符串形式，不是选中选项的文本内容，根本无法判断是否包含"Trial"。
• 禁用按钮的方法不合适：使用attr("disabled", "disabled")和removeAttr("disabled")处理布尔属性，不如用prop()方法更可靠。
• 多余事件监听：下拉框不需要监听keyup事件，change事件足够响应选项切换。

修复后的代码 #

JavaScript代码 #

function disableSubmit() {
    // 获取选中选项的文本内容
    const selectedText = $("#inputDropdown option:selected").text();
    // 判断是否包含"Trial"，设置按钮禁用状态
    $("button[type='submit']").prop("disabled", selectedText.includes("Trial"));
}

$(function() {
    // 绑定下拉框的change事件
    $("#inputDropdown").on("change", disableSubmit);
    // 页面加载时执行一次，确保初始状态正确
    disableSubmit();
});

HTML表单（无需修改） #

<form class="mb-3" id="submitform" action="page.php" method="post" accept-charset="UTF-8">
  <div class="form-group mb-4">
    <label for="name">Name</label>
    <input id="name" name="name" class="form-control" type="text" placeholder="Name">
  </div>
  <div class="form-group mb-4">
    <label for="email">Email</label>
    <input id="email" name="email" class="form-control" type="text" placeholder="Email">
  </div>
  <div class="form-group mb-4">
    <label for="name">Available Package</label>
    <select class="form-control" id="inputDropdown" name="inputDropdown">
      <option value="0" selected> - </option>
      <option value="1"> Option 1 which is Trial </option>
      <option value="2"> Here is another dropdown text </option>
      <option value="3"> #3 is the charm but nada </option>
      <option value="4"> Whatever you make Trial with it </option>
    </select>
  </div>
  <div class="col-md-2 mx-auto">
    <button class="btn btn-primary btn-block" type="submit">Add</button>
  </div>
</form>

说明 #

• 用$("#inputDropdown option:selected").text()准确获取选中选项的文本内容。
• 用prop("disabled", 布尔值)直接设置按钮的禁用状态，代码更简洁。
• 页面加载时调用一次disableSubmit()，确保初始状态（默认选中的第一项）下按钮状态正确。
• 只绑定change事件，避免不必要的事件触发。

内容的提问来源于stack exchange，提问作者Yamile