4.5 按钮在单击后自动失效

在某些HTML页面应用中，可能需要实现按钮在单击一次后就自动失效的效果，通过设置按钮控件的disabled属性就可以实现该功能。下面给出一个通过JavaScript实现按钮在单击后自动失效的代码实例。

关于【代码4-4】的说明：

● 第14行和第17行代码通过<button>标签分别定义了两个按钮，第一个按钮（id="id-click-once"）用于测试在单击后自动失效的功能，第二个按钮（id="id-re-active"）用于重新激活第一个按钮。

● 第21～23行代码为第一个按钮定义了onclick事件处理方法，其中第22行代码通过设定disabled属性（=true）让该按钮失效。

● 第24～26行代码为第二个按钮定义了onclick事件处理方法，其中第25行代码通过设定disabled属性（=false）让第一个按钮重新被激活。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图4.4所示。

图4.4 JavaScript控制按钮在单击后自动失效

如图4.4中箭头所示，当用户按下第一个按钮（Click Once）后，该按钮就自动失效了。用户可以通过第二个按钮（Re-Active）再次激活第一个按钮。