根据单选按钮的选择禁用文本输入框-js教程-PHP中文网

根据单选按钮的选择禁用文本输入框

聖光之護

发布： 2025-10-26 13:44:01

原创

203人浏览过

根据单选按钮的选择禁用文本输入框

本文介绍了如何使用 JavaScript 根据单选按钮的选择动态地禁用或启用文本输入框。通过监听单选按钮的点击事件，并根据当前选中的按钮，控制文本输入框的 `disabled` 属性，从而实现交互式的表单控制。文章提供了详细的代码示例和解释，帮助开发者快速掌握该技巧，并将其应用到实际项目中。

在 Web 开发中，经常需要根据用户的选择来动态地改变表单元素的行为。一个常见的需求是根据单选按钮的选择，禁用或启用某些文本输入框。本文将详细介绍如何使用 JavaScript 实现这一功能。

实现原理

实现的核心在于监听单选按钮的 click 事件，并在事件处理函数中，根据当前选中的单选按钮，设置文本输入框的 disabled 属性。当 disabled 属性为 true 时，文本输入框将被禁用，用户无法输入内容。当 disabled 属性为 false 时，文本输入框将被启用，用户可以正常输入内容。

代码示例

以下是一个完整的 HTML 示例，展示了如何根据单选按钮的选择禁用或启用文本输入框：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>根据单选按钮禁用文本框</title>
</head>
<body>
  <form>
    禁用: <input type="radio" name="radios" id="disableRadio" onclick="enableDisable()">
    启用: <input type="radio" name="radios" id="enableRadio" onclick="enableDisable()">
    文本框: <input type="text" name="text" id="textBox">
  </form>

  <script>
    function enableDisable() {
      const disableRadio = document.getElementById('disableRadio');
      const textBox = document.getElementById('textBox');

      textBox.disabled = disableRadio.checked;
    }
  </script>
</body>
</html>

登录后复制

代码解释:

HTML 结构:

微软文字转语音
微软文本转语音，支持选择多种语音风格，可调节语速。

0

查看详情
- 创建两个单选按钮，id 分别为 disableRadio 和 enableRadio，name 属性都设置为 radios，确保它们属于同一组单选按钮。
- 创建一个文本输入框，id 为 textBox。
- 为每个单选按钮添加 onclick 事件处理函数 enableDisable()。
JavaScript 代码:
- enableDisable() 函数：
  - 获取 disableRadio 和 textBox 元素的引用。
  - 将 textBox 的 disabled 属性设置为 disableRadio.checked 的值。如果 disableRadio 被选中，则 textBox.disabled 为 true，文本框被禁用；否则，textBox.disabled 为 false，文本框被启用。

优化方案

上述代码直接在 HTML 元素上绑定了 onclick 事件，虽然简单直接，但在大型项目中可能不够灵活。更推荐的做法是将事件监听器添加到 JavaScript 代码中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>根据单选按钮禁用文本框</title>
</head>
<body>
  <form>
    禁用: <input type="radio" name="radios" id="disableRadio">
    启用: <input type="radio" name="radios" id="enableRadio">
    文本框: <input type="text" name="text" id="textBox">
  </form>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const disableRadio = document.getElementById('disableRadio');
      const enableRadio = document.getElementById('enableRadio');
      const textBox = document.getElementById('textBox');

      function enableDisable() {
        textBox.disabled = disableRadio.checked;
      }

      disableRadio.addEventListener('click', enableDisable);
      enableRadio.addEventListener('click', enableDisable);
    });
  </script>
</body>
</html>

登录后复制

代码解释:

使用 DOMContentLoaded 事件确保在 DOM 加载完成后再执行 JavaScript 代码。
使用 addEventListener 方法为 disableRadio 和 enableRadio 元素添加 click 事件监听器。
enableDisable 函数与之前的版本相同。

这种方式将 HTML 结构和 JavaScript 行为分离，提高了代码的可维护性和可读性。

总结

本文介绍了如何使用 JavaScript 根据单选按钮的选择动态地禁用或启用文本输入框。通过监听单选按钮的 click 事件，并根据当前选中的按钮，控制文本输入框的 disabled 属性，可以实现交互式的表单控制。选择合适的事件绑定方式，可以提高代码的可维护性和可读性。掌握这一技巧，可以为用户提供更加灵活和友好的表单交互体验。

以上就是根据单选按钮的选择禁用文本输入框的详细内容，更多请关注php中文网其它相关文章！