禁用启用input、select、按钮影藏和显示

禁用启用input、select、按钮影藏和显示

输入框、下拉框、按钮这些在我们平时生活中用的也非常多，一些填写数据选择数据这些都是非常常见的，一般情况下这些东西都是正常使用但在有些时候我们不想要用户去修改或者填写的一些数据我们该怎样去进行一个操控，这个其实也非常的简单我们只要进行相关的一个属性控制就行了，那我们来看一下怎样写吧。

在这里我们主要实现这些功能的禁用启用主要就是一个对象attr ，attr它就是对HTML属性的一个操作，它可以改变属性的值，设置属性的值，从而达到你需要在什么时候有一个什么效果。

首先我们这里看到第一个按钮的显示和隐藏，按钮在我们HTML中写好之后它是正常显示的但如果我们不想然他显示我们该怎样操作$("#baoCunXiangMu").attr("hidden", "hidden")先获取到对应的按钮然后点attr（）括号里面就是按钮的一个隐藏属性，首先我们来解释一下attr 的用法，它要输入两个值，第一个是你要更改或者你要添加的属性，第二个就是你要更改的值或者添加的值，我们这里说影藏按钮就是一个属性“hidden”，只要把按钮加上这个属性就可以让按钮进行一个隐藏attr("hidden", "hidden")前面就是hidden属性然后后面给值也给hidden就可以达到影藏的效果。而如果你想要它进行一个显示，$("#xiuGaiXiangMu").attr("hidden", null)就是attr 后面hidden 属性设置值为null，它就设置hidden值为空了，所以就得以显示了。

我们下面就说一下input输入框的禁用和启用，它在操作上是和按钮的显示影藏是一样的只是对应的属性不一样。

$("#formInsertAcademe input").attr('readonly', 'readonly')//input禁用

这个呢就是input输入框的禁用的方法，它的禁用的一个属性就是readonly，给input标签加上这个属性就可以进行一个禁用了，其实这些属性只要个它加上就可以了，不给值也是可以的attr('readonly',’’)//input禁用就是直接这样都是可以的，只要加上了这个属性就可以达到效果了，但我觉得加上还是意思明确一点，所以我就加上了，这里解除禁用也是一样的。

$("#formInsertAcademe input").attr('readonly', null)//input启用

直接给readonly这个属性一个null空值就行了，这样就可以让input恢复一个可输入的一个状态，禁用了之后就是一个可以看到值但不可以改不可以输入。这就是input的一个禁用和

启用。

然后就是select 选择框的一个禁用和启用同样的它们的操作方式都是一样的都只是属性不同，select 选择框的禁用就是，

$("#formInsertAcademe select").attr('disabled', 'disabled')//select禁用

它的一个禁用属性就是 disabled 操作的方式就是一样的了，获取到你需要进行操作的选择框然后attr设置disabled值然后就可以改变它的状态为禁用，这里禁用也是只可以显示，不可以去修改去选择其他的。

$("#formInsertAcademe select").attr('disabled', null)//select启用

然后这就是启用也是一样的操作我就不说了，

按钮也是可以禁用和启用的，这里就说了影藏和显示，禁用和启用就是自己去写一下吧。

这下边呢就是上边操作的一个展示效果图左边呈灰色部分的就是禁用的，那一个保存的按钮也是影藏的。右边就是一个启用的状态保存按钮显示出来。