Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

js button disabled

作者:看不见相思意   发布日期:2025-07-24   浏览:71

<!DOCTYPE html>
<html>
<head>
    <title>JS Button Disabled Example</title>
</head>
<body>
    <button id="myButton" onclick="alert('Button clicked!')">Click Me</button>
    <button onclick="toggleButtonState()">Toggle Button State</button>

    <script>
        function toggleButtonState() {
            var button = document.getElementById("myButton");
            if (button.disabled) {
                button.disabled = false;
                button.innerText = "Click Me";
            } else {
                button.disabled = true;
                button.innerText = "Disabled";
            }
        }
    </script>
</body>
</html>

解释说明:

  1. HTML结构:

    • 有两个按钮,第一个按钮 (id="myButton") 初始是可点击的,点击会弹出一个提示框。
    • 第二个按钮用于切换第一个按钮的启用/禁用状态。
  2. JavaScript逻辑:

    • toggleButtonState 函数通过 document.getElementById 获取第一个按钮元素。
    • 检查按钮的 disabled 属性:
      • 如果按钮被禁用,则将其设置为启用状态,并将文本恢复为 "Click Me"。
      • 如果按钮是启用状态,则将其设置为禁用状态,并将文本更改为 "Disabled"。

上一篇:nodejs 编译

下一篇:js object keys

大家都在看

js 数组对象排序

js 数组删掉第一个值

js fill

js json数组

js 数组复制

js 复制数组

js 数组拷贝

js 对象转数组

js 深拷贝数组

js 点击空白区域触发事件

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站