JS判断页面控件是否可用

最新推荐文章于 2022-02-24 20:42:39 发布

humingyan

最新推荐文章于 2022-02-24 20:42:39 发布

阅读量1.5k

点赞数

分类专栏： web开发文章标签： radiobutton textbox javascript object ajax c

web开发专栏收录该内容

34 篇文章 0 订阅

订阅专栏

近期做的项目中涉及到页面控件是否可用，发现了一些有趣的东西，现来说说具体如下：

我有一个需求，就是点击radiobutton1时textbox1控件可用，当点击radiobutton2时textbox1不可用。当时以为javascript可以很简单的就处理了这个问题，但发现并非如此。上网找了下资料可以了解到对于如：radiobutton、checkbox这样的控件是否可用直接设置它们的disabled属性为true,false即可。但像label，textbox这样的控件如果这样设置就不起作用了。

上网找了下资料发现http://blog.csdn.net/hzfu007/archive/2009/03/17/3998862.aspx 和我的问题很相像，但这里仅仅说的是radiobutton这样的控件是否可用，而我的控件是textbox。然后我就试图修改它们的disabled为true或false 发现根本不好用。之后我就在后台控制

    protected void radiobutton1_CheckedChanged(object sender, EventArgs e)
    {
        this.linkimg.Enabled = true;
        this.linkimg.BackColor = Color.White;
    }
    protected void radiobutton2_CheckedChanged(object sender, EventArgs e)
    {
        this.linkimg.Enabled = false;
        this.linkimg.BackColor = Color.Silver;
    }

这样是可以实现的，在生成的源代码中发现textbox不可用是设置了它的disabled属性，只不过属性值是"disabled" 而不是true或false 。那么有了disabled属性当然应该有enabled属性吧。因为不想回发（页面刷新）实现这个功能，所以还得利用javascript

修改js为：

       if(document.getElementById('radiobutton1').checked==true)
        {

        document.getElementById('textbox1').disabled="disabled"; //使控件不可用
        document.getElementById('textbox1').style.backgroundColor="#9c9c9c"; //背景色变灰

        }
        if(document.getElementById('radiobutton2').checked==true)
        {
         document.getElementById('textbox1').enabled="enabled";   //控件可用      或document.getElementById('textbox1').disabled="enabled"; //这样也是不行的
         document.getElementById('textbox1').style.backgroundColor="#ffffff";
        }

问题又来了，点击radiobutton1 可以使textbox不可用，但可用还是不行。红色代码根本不起作用。仔细观察发现JS中控件根本没有enabled属性，这个属性是后台控件的属性。并在源代码中也发现控件不可用只是把该控件的disabled="disabled" 可用的话就是没有disabled="disabled" 既然这样那么我想去掉disabled="disabled"不就可以了么！

上网也找了好些资料发现JS去掉控件属性是一件麻烦的事。后来我想到了几个变通的方法来解决：

可以利用AJAX.NET无刷新来解决这个问题，但总觉得能用简单的方法解决的问题，不用AJAX这个大家伙上阵，甚至我还想到了利用JS的创建删除元素的方法。思路是这样的：首先点击radiobutton1控件使控件不可用，当点击 radiobutton2的时候利用removeChild删除不可用的textbox之后立马用createElement在原来位置创建一个textbox。属性都设置好。做到了无刷新，对于用户是不可见的，他们以为是实现了效果，其实是删除了原有的不可用控件之后，再生成一个可用的控件。但仔细想想这些方法有点小题大作。问题应该可以解决，只不过没有找对方法。

忽然间我灵感来了，如果“取反”会怎样呢？没想到这下成功了。代码如下：

       if(document.getElementById('radiobutton1').checked==true)
        {

        document.getElementById('textbox1').disabled="disabled"; //使控件不可用
        document.getElementById('textbox1').style.backgroundColor="#9c9c9c"; //背景色变灰

        }
        if(document.getElementById('radiobutton2').checked==true)
        {
        document.getElementById('textbox1').disabled=!document.getElementById('textbox1').disabled//使控件可用
        document.getElementById('textbox1').style.backgroundColor="#ffffff";

}

哈哈终于让我解决了。说了那么多废话，总结一下吧；

如果想利用JS更改控件是否可用 radiobutton、checkbox这样的控件设置它们的disabled 为true或false即可，lable或textbox这样的控件则设置disabled属性。只不过不可用为"false" 可用“取反”即=!document.getElementById('textbox1').disabled;

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/diligentcat/archive/2010/05/08/5568967.aspx