表单元素编辑状态的修改方法:启用编辑/禁用编辑

关于表单元素的编辑状态,js中可以进行随意修改其是否可编辑的状态

一.disabled属性:

  禁用状态的修改:

   1. $("#id").attr("disabled",true);

   2. $("#id")[0].disabled="true";

  启用状态的修改:

   $("#id").removeAttr("disabled");

 

 二.readonly属性:

  禁用状态的修改:

   1. $("#id").attr("readonly",true);

   2. $("#id")[0].readonly="true";

  启用状态的修改:

   $("#id").removeAttr("readonly");

 

disable和readonly的区别:

  1. readonly只针对input(text/password)和textarea有效,而disabled对于所有的表单元素有效,包括select,radio,checkbox,button等
  2. 在表单元素使用了disabled后,我们将表单以POST或者GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去

注意:注意:注意:

  • 在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时将属性设置为readonly
  • 当用户正式提交了表单后需要等待管理员的信息验证,不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的是要将submit button也disabled掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值会被清除
  • 在用户按了提交按钮后,利用javascript将提交按钮disabled掉,可防止在网络条件比较差的环境下,用户反复点击提交按钮导致数据冗余地存入数据库
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以通过以下步骤实现: 1. 在列表行中添加一个编辑按钮,并绑定点击事件,点击按钮时弹出编辑对话框。 2. 在编辑对话框中添加表单,让用户输入需要编辑的信息。 3. 在表单中添加提交按钮,并绑定点击事件,点击提交按钮时触发提交操作。 4. 在提交操作中,先禁用当前行的单行编辑按钮,然后发送请求保存编辑信息。 5. 如果保存成功,则立即关闭编辑对话框,并恢复当前行的单行编辑按钮的可用状态。 下面是一个示例代码,具体实现可以根据自己的需求进行调整: ```html <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button> </template> </el-table-column> </el-table> <el-dialog :visible.sync="dialogVisible" title="编辑信息"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="姓名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄"> <el-input v-model.number="form.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleSubmit" :disabled="submitting">提交</el-button> </el-form-item> </el-form> </el-dialog> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 22 }, { name: '王五', age: 25 } ], dialogVisible: false, // 是否显示编辑对话框 form: { name: '', age: '' }, // 编辑表单数据 submitting: false // 是否正在提交数据 } }, methods: { handleEdit(row) { this.dialogVisible = true // 显示编辑对话框 this.form = { ...row } // 将当前行的数据复制到编辑表单中 }, handleSubmit() { this.submitting = true // 禁用提交按钮 setTimeout(() => { // 模拟提交数据 console.log('提交数据', this.form) this.submitting = false // 启用提交按钮 this.dialogVisible = false // 关闭编辑对话框 }, 1000) } } } </script> ``` 在提交数据时,我们可以使用`setTimeout`函数模拟异步请求的延迟,等待1秒钟后再关闭编辑对话框和启用单行编辑按钮。如果需要向服务器发送请求保存数据,可以在`setTimeout`函数中使用`axios`等库进行请求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_格鲁特宝宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值