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

发布时间：2025-10-26

点击量：

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

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

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

实现原理

实现的核心在于监听单选按钮的 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 结构:
黄页吧
前台目前的功能有: 1.搜索：它可以多方面来搜索：关键字来搜索，多个关键字之间用空格分开（如：南内环计算机),将搜索把有南内环街上的计算机公司；按行业浏览，行业类别分三层，你可以依次选择你需要的类别来搜索这个行业下的所有单位；地区关键字搜索：根据你所选择的地区和关键字来显示相关单位；行业地区搜索：你可以不输入关键字直接来查找某个地区的所有行业下的单位，你也可以输入关键字来搜索相应地区的行业
0 查看详情
- 创建两个单选按钮，id 分别为 disableRadio 和 enableRadio，name 属性都设置为 radios，确保它们属于同一组单选按钮。
- 创建一个文本输入框，id 为 textBox。
- 为每个单选按钮添加 onclick 事件处理函数 enableDisable()。
J*aScript 代码:
- enableDisable() 函数：
  - 获取 disableRadio 和 textBox 元素的引用。
  - 将 textBox 的 disabled 属性设置为 disableRadio.checked 的值。如果 disableRadio 被选中，则 textBox.disabled 为 true，文本框被禁用；否则，textBox.disabled 为 false，文本框被启用。

优化方案

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

<!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 加载完成后再执行 J*aScript 代码。
使用 addEventListener 方法为 disableRadio 和 enableRadio 元素添加 click 事件监听器。
enableDisable 函数与之前的版本相同。

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

总结

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

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

上一篇：实现Node.js与EJS动态搜索：无刷新实时结果更新教程

下一篇：css动画与伪类hover配合使用

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

发布时间：2025-10-26

点击量：

实现原理

代码示例

优化方案

总结

返回

4008988990