有时候明明是些很简单的东西，因为自己的一些大意，可能就在那圈子里一直兜兜转转，好久都绕不出来。

所以我也愿意把这些很简单的愚蠢写出来，与君共享~

首先大家知道<input>有一个名叫“button”的type，它的可见与否由“disabled”属性决定。

下面的代码，我的原意是一个输入框和三个按钮。在点击“编辑”按钮前，另外三个都属于“不可用”状态，点击以后方能恢复可用。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

    function edit(){

      document.getElementById("editCode").disabled = true;

      document.getElementById("inviteCode").disabled = false;

      document.getElementById("randomCode").disabled = false;

      document.getElementById("submitCode").disabled = false;

    }

</script>

</head>

<body>

    <h3>邀请码设置</h3>

    <s:form>

        <table cellspacing="">

            <tr>

                <th>当前邀请码:</th>

                <td><input type="text" name="inviteCode" id="inviteCode" value="" class="input" size="" disabled/></td>

                <td><input type="button" name="randomCode" id="randomCode" value="随机获取" disabled/></td>

            </tr>

            <tr align="right">

                <td><input type="button" name="editCode" id="editCode" value="编辑" onclick="edit()"/></td>

                <td><input type="submit" name="submitCode" id="submitCode" value="确定" disabled/></td>

            </tr>

        </table>

    </s:form>

</body>

</html>

很简单，就是在edit()函数里将各个元素的disabled类型设置为可用或者不可用。

中间我遇到了个很大的问题导致我一直以为自己找的解决方法不可用，那就是我将元素命名为“edit”、“submit”等等，可能与本身一些内容发生了冲突。审查元素后报错：object is not a function.

改名后一切得到解决。

js实现input button从不可用变为可用的更多相关文章

  1. input ,button, textarea 1)使用disabled , 2) 显示值, 3) 表单提交. 4) jquery.form.js ajaxSubmit() 无刷新ajax提交表单.

    1.使用disabled input , button  textarea 可以 被 禁用, 禁用的效果 : 1) 上面的点击事件无法使用 --- button       : 下面的 onclick ...

  2. JS改变input的value值不触发onchange事件解决方案 （转）

    方法(一)(转载的网络资料) 需要了解的知识     首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...

  3. selenium web driver 使用JS修改input属性

    selenium获取input时候,发现type=”hidden” 的input无法修改value,经牛人指点,可以使用js修改 首先html源文件如下,设置为text .hidden.submit ...

  4. js auto hover button & html5 button autofocus

    js auto hover button & html5 button autofocus input // html 5 <input name="myinput" ...

  5. PHP——0128练习相关2——js点击button按钮跳转到另一个新页面

    js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...

  6. <asp:TextBox><asp:LinkButton><input button>调用后台方法后刷新页面

    <asp:TextBox><asp:LinkButton>服务器控件,执行后台方法,会回调加载js,相当于页面重新加载,刷新页面 <input button>不能直 ...

  7. 通过js动态创建button

    通过js动态创建button 一.实例描述 通过JS的DOM对象,实现元素的动态创建. 二.效果 三.代码 <!DOCTYPE html> <html lang="zh-c ...

  8. JS限制input输入的为数字并且有小数的时候最多保留两位小数

    JS限制input用户输入的为数字并且有小数的时候最多保留两位小数,代码如下: html部分: <input type="number" onkeypress="r ...

  9. JS 捕获 input 中 键盘按键

    JS 捕获 input 中 键盘按键 的相应处理事件是很简单的,google搜索一下很容易找到处理方式,请看如下一种简单的处理方式: HTML代码: <div> <input typ ...

随机推荐

  1. python 常用

    1. dir()             不带参数时,返回当前范围内的变量.方法和定义的类型列表:带参数时,返回参数的属性.方法列表.如果参数包含方法__dir__(),该方法将被调用.如果参数不包含 ...

  2. linux中的 tar命令的 -C 参数,以及其它一些参数（转）

    linux中的 tar命令的 -C 参数,以及其它一些参数 复制源:http://www.cnblogs.com/li-hao/archive/2011/10/03/2198480.htmltar命令 ...

  3. Educational Codeforces Round 15_C. Cellular Network

    C. Cellular Network time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  4. lldpcli 常用命令

    1.查看周围的邻居列表 root@hbg:/# lldpcli show neighbors------------------------------------------------------ ...

  5. HDU2519:新生晚会

    Problem Description 开学了,杭电又迎来了好多新生.ACMer想为新生准备一个节目.来报名要表演节目的人很多,多达N个,但是只需要从这N个人中选M个就够了,一共有多少种选择方法?   ...

  6. Django:之ORM、CMS和二维码生成

    Django ORM Django 的数据库接口非常好用,我们甚至不需要知道SQL语句如何书写,就可以轻松地查询,创建一些内容,所以有时候想,在其它的地方使用Django的 ORM呢?它有这么丰富的 ...

  7. 读苹果开发文档时遇到瓶颈，转而花2天看了Objc基本语法

    根据这篇博客中列出的文章开始看Objc基本语法: http://blog.hellolucky.info/articles/ios-beginner-ios-development/ 看完以后,明白多 ...

  8. TCP的四次挥手

    由于TCP连接是全双工的,因此每个方向都必须单独进行关闭.这个原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向的连接.收到一个 FIN只意味着这一方向上没有数据流动, 一个TCP连接 ...

  9. VideoView的视频的全屏播放

    import android.net.Uri;import android.os.Bundle;import android.app.Activity;import android.content.I ...

  10. java 随机流

    Example10_8.java import java.io.*; public class Example10_8 { public static void main(String args[]) ...