input标签中加入判断条件来控制是否可编辑
时间: 2023-09-20 12:05:56 浏览: 194
您可以使用 JavaScript 来控制 input 标签的可编辑状态。具体实现方法如下:
1. 给 input 标签添加一个 id 属性,以便可以通过 JavaScript 获取到该标签。
2. 使用 JavaScript 获取到 input 标签,并使用其属性或方法来控制其可编辑状态。例如,您可以使用以下代码来禁用一个 input 标签:
```
document.getElementById("myInput").disabled = true;
```
其中,"myInput" 是您给 input 标签设置的 id 属性的值。上述代码会将该标签禁用,使其无法编辑。
3. 如果您想根据某个条件来控制 input 标签的可编辑状态,则可以在 JavaScript 中使用 if 语句来判断该条件,并根据条件来设置 input 标签的属性。例如,以下代码会根据变量 someCondition 的值来决定是否禁用 input 标签:
```
if (someCondition) {
document.getElementById("myInput").disabled = true;
} else {
document.getElementById("myInput").disabled = false;
}
```
在这个代码中,如果变量 someCondition 的值为 true,input 标签会被禁用。否则,它会恢复可编辑状态。
注意,如果您想在表单提交时将禁用的 input 标签的值也提交到服务器端,可以将其设置为只读模式而不是禁用模式。只读模式下,input 标签的值可以被提交到服务器端,但用户无法编辑它。例如,您可以在 input 标签中添加 readonly 属性来实现只读模式:
```
<input type="text" id="myInput" name="myInput" value="some value" readonly>
```
在这个代码中,input 标签的值为 "some value",并且设置了 readonly 属性,使其变为只读模式。
阅读全文
相关推荐


















我现在就负责把管理员模块前端完善好,你告诉我我怎么做,以下是我现有的管理员模块代码addminadd.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
管理员管理
</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="lib/loading/okLoading.js"></script>
</head>
<style>
.imgs{display: none;}
.picture{display: none;}
</style>
<body>
<form class="layui-form" id="adminadd">
<input type="hidden" name="id" value="">
<label for="username" class="layui-form-label">
*登录名
</label>
<input type="text" id="name" name="name" required="" lay-verify="required"
autocomplete="off" class="layui-input" value="">
*将会成为您唯一的登入名
<label for="phone" class="layui-form-label">
*手机
</label>
<input type="text" id="phone" name="phone" required="" lay-verify="phone"
autocomplete="off" class="layui-input" value="">
*将会成为您唯一的登入名
<label for="role" class="layui-form-label">
*用户组
</label>
<select name="group_id">
<option value="">请选择角色</option>
<option value="1" >超级管理员</option>
</select>
<label for="link" class="layui-form-label">
*缩略图
</label>
<button type="button" class="layui-btn" id="test1">
上传图片
</button>
<input class="layui-upload" type="file" accept="undefined" id="previewImg" name="img" onchange="upload(this,)">
ဂ撤销上传
<label class="layui-form-label">缩略图展示
</label>
<input id="avatar" name="image" required="" type="hidden" value="">
<label for="L_pass" class="layui-form-label">
*密码
</label>
<input type="password" id="L_pass" name="password" required="" lay-verify="pass"
autocomplete="off" class="layui-input" value="">
6到16个字符
<label for="L_repass" class="layui-form-label">
*确认密码
</label>
<input type="password" id="L_repass" name="repass" required="" lay-verify="repass"
autocomplete="off" class="layui-input">
<label class="layui-form-label">状态</label>
<input type="radio" name="status" value="1" title="启用" checked="checked">
启用
<input type="radio" name="status" value="0" title="禁用" checked="checked">
禁用
<label for="L_repass" class="layui-form-label">
</label>
<button class="layui-btn" lay-filter="add" lay-submit="">
增加
</button>
</form>
<script src="lib/layui/layui.js" charset="utf-8">
</script>
<script src="js/x-layui.js" charset="utf-8">
</script>
<script>
layui.use(['form','layer'], function(){
$ = layui.jquery;
var form = layui.form()
,layer = layui.layer;
okLoading.close($);
//自定义验证规则
/*form.verify({
nikename: function(value){
if(value.length < 5){
return '昵称至少得5个字符啊';
}
}
,pass: [/(.+){6,12}$/, '密码必须6到12位']
,repass: function(value){
if($('#L_pass').val()!=$('#L_repass').val()){
return '两次密码不一致';
}
}
});*/
//监听提交
form.on('submit(add)', function(data){
var admindate=$("#adminadd").serialize();
//var data = data.field;
$.ajax({
type:'post',
url:"xxx",
data:admindate,
datatype:"json",
success:function (data) {
if(data.status==1){
layer.msg(data.info,{icon:1,time:1000});
setTimeout(function(){
window.parent.location.reload();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
},1000);
return false;
}else{
layer.msg(data.info,{icon:5,time:2000});return false;
}
}
})
return false;
});
});
</script>
<script>
//轮播图上传
function upload(obj,id)
{
var formData = new FormData();
formData.append('img', $('#previewImg')[0].files[0]);
formData.append('id', id);//将id追加再id中
layer.msg('图片上传中', {icon: 16});
$.ajax({
type:"post",
processData: false,
contentType: false,
url:"xxx",
data:formData,
success:function(data){
if(data.status == 1){
//console.log(data.image_name);
layer.closeAll('loading');
//layer.msg(data.info,{icon:1,time:1000});
$("#pimages").attr('src',data.image_name);
$("#avatar").val(data.image_name);
$(".imgs").show();
return false;
}else{
layer.msg(data.info,{icon:2,time:1000});
}
}
});
}
</script>
</body>
</html> 和adminlist.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
管理员列表
</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="lib/loading/okLoading.js"></script>
</head>
<body>
首页
管理员管理
管理员列表
ဂ
<form class="layui-form x-center" action="" style="width:80%">
<label class="layui-form-label">日期范围</label>
<input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
<input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
<input type="text" name="username" placeholder="请输入登录名" autocomplete="off" class="layui-input">
<button class="layui-btn" lay-submit="" lay-filter="sreach"></button>
</form>
<xblock>
<button class="layui-btn layui-btn-danger" onclick="delAll()">批量删除</button>
<button class="layui-btn" onclick="admin_add('添加用户','adminadd.html','600','500')">添加</button>
共有数据:88 条
</xblock>
<input type="checkbox" name="" value="">
ID
登录名
手机
邮箱
角色
加入时间
状态
操作
<input type="checkbox" value="1" name="">
1
admin
1111111111
[email protected]
1970-01-01 08:00:00
启用
<input type="checkbox" value="1" name="">
2
admin1
1111111111
[email protected]
超级管理员
1970-01-01 08:00:00
启用
<input type="checkbox" value="1" name="">
3
admin2
11111111
[email protected]
超级管理员
1970-01-01 08:00:00
启用
<input type="checkbox" value="1" name="">
4
admin
1111111111
[email protected]
2019-07-20 17:03:28
启用
<input type="checkbox" value="1" name="">
5
admin
11111111
[email protected]
2019-07-20 17:03:41
启用
<script src="lib/layui/layui.js" charset="utf-8"></script>
<script src="js/x-layui.js" charset="utf-8"></script>
<script>
layui.use(['laydate','element','laypage','layer'], function(){
$ = layui.jquery;//jquery
laydate = layui.laydate;//日期插件
lement = layui.element();//面包导航
laypage = layui.laypage;//分页
layer = layui.layer;//弹出层
okLoading.close($);
//以上模块根据需要引入
/*laypage({
cont: 'page'
,pages: 100
,first: 1
,last: 100
,prev: '<'
,next: '>'
}); */
var start = {
min: laydate.now()
,max: '2099-06-16 23:59:59'
,istoday: false
,choose: function(datas){
end.min = datas; //开始日选好后,重置结束日的最小日期
end.start = datas //将结束日的初始值设定为开始日
}
};
var end = {
min: laydate.now()
,max: '2099-06-16 23:59:59'
,istoday: false
,choose: function(datas){
start.max = datas; //结束日选好后,重置开始日的最大日期
}
};
document.getElementById('LAY_demorange_s').onclick = function(){
start.elem = this;
laydate(start);
}
document.getElementById('LAY_demorange_e').onclick = function(){
end.elem = this
laydate(end);
}
});
//批量删除提交
function delAll () {
layer.confirm('确认要删除吗?',function(index){
//捉到所有被选中的,发异步进行删除
layer.msg('删除成功', {icon: 1});
});
}
/*添加*/
function admin_add(title,url,w,h){
x_admin_show(title,url,w,h);
}
/*停用*/
function admin_stop(obj,id,e){
layer.confirm(e==1?'你确定要启用吗?':'你确定要禁用吗?',{icon: 3, title:'提示'},function(index){
$.ajax({
type:"post",
url:"xxx",
data:{id:id,status:e},
dataType:"json",
success:function(data)
{
if(data.status==1){
//发异步把用户状态进行更改
$(obj).attr("class","layui-btn layui-btn-danger ");
$(obj).text("隐藏");
$(obj).remove();
layer.msg(data.info,{icon: 6,time:1000});
setTimeout(function(){
window.location.reload();
},1000);return false;
}else{
//发异步把用户状态进行更改
$(obj).attr("class","layui-btn layui-btn-normal ");
$(obj).text("显示");
$(obj).remove();
layer.msg(data.info,{icon: 5,time:1000});return false;
}
}
});
});
}
/*启用*/
function admin_start(obj,id){
layer.confirm('确认要启用吗?',function(index){
//发异步把用户状态进行更改
$(obj).parents("tr").find(".td-manage").prepend('');
$(obj).parents("tr").find(".td-status").html('已启用');
$(obj).remove();
layer.msg('已启用!',{icon: 6,time:1000});
});
}
//编辑
function admin_edit (title,url,id,w,h) {
url = url+"?id="+id;
x_admin_show(title,url,w,h);
}
/*删除*/
function admin_del(obj,id){
layer.confirm('确认要删除吗?',function(index){
//发异步删除数据
$(obj).parents("tr").remove();
layer.msg('已删除!',{icon:1,time:1000});
});
}
</script>
</body>
</html>,这是我的admin.js:// js/admin.js
const AdminManager = {
// 获取所有管理员
getAll: function() {
return JSON.parse(localStorage.getItem('admins')) || [];
},
// 保存所有管理员
saveAll: function(admins) {
localStorage.setItem('admins', JSON.stringify(admins));
},
// 获取单个管理员
getById: function(id) {
return this.getAll().find(item => item.id == id);
},
// 添加或更新管理员
save: function(admin) {
let admins = this.getAll();
if (admin.id) {
// 更新
const index = admins.findIndex(a => a.id == admin.id);
if (index !== -1) {
admins[index] = admin;
}
} else {
// 新增
admin.id = this.generateId();
admin.create_time = new Date().toLocaleString();
admins.push(admin);
}
this.saveAll(admins);
return admin;
},
// 删除管理员
delete: function(id) {
let admins = this.getAll().filter(a => a.id != id);
this.saveAll(admins);
},
// 生成ID
generateId: function() {
const admins = this.getAll();
return admins.length > 0 ? Math.max(...admins.map(a => a.id)) + 1 : 1;
}
}现在的问题是运行出来界面添加删除按钮点了没反应,我现在只需要弄好前端不需要和后端交互,添加的信息存本地就行先不连数据库,请你帮我解决一下,并且一定要给我完整的修改后的代码,

