点击禁用的YTLink输入框无法触发提示？求技术解决方案

问题原因 #

处于**禁用状态（disabled）**的表单元素不会触发任何鼠标事件，所以直接给#YTLink绑定click事件是无效的，这就是提示功能无法生效的核心原因。

解决方案 #

把点击事件绑定到#YTLink的父容器上，通过判断输入框的禁用状态触发提示；同时优化输入框的禁用逻辑，实现实时响应输入变化。

修改后的完整代码 #

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group last mb-3">
  <label for="vimeoLink">VimeoLink</label>
  <input type="text" class="form-control" placeholder="" name="vimeoLink" id="vimeoLink">
</div>

<div class="form-group last mb-3 yt-container">
  <label for="YTLink">YTLink</label>
  <input type="text" class="form-control formcheck" placeholder="" name="YTLink" id="YTLink">
</div>

JavaScript

// 页面加载时禁用YTLink
$(document).ready(function() {
  $('#YTLink').prop('disabled', true);
  
  // 实时监听VimeoLink输入，同步控制YTLink的禁用状态
  $('#vimeoLink').on('input change', function() {
    $('#YTLink').prop('disabled', $(this).val().trim() === '');
  });
  
  // 通过父容器监听点击，判断YTLink是否禁用并弹出提示
  $('.yt-container').on('click', function() {
    if ($('#YTLink').is(':disabled')) {
      alert('请先填写VimeoLink！');
      console.log('disabled input clicked!');
    }
  });
});

关键优化点 #

• 用jQuery的prop方法处理表单元素的禁用状态，比原生DOM操作更简洁可靠
• 给vimeoLink同时绑定input和change事件，实现输入时实时更新YTLink状态（原代码仅在输入框失焦时触发）
• 将点击事件绑定到父容器，规避禁用元素不响应鼠标事件的限制

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