勾选时激活input 否则禁用的javascript代码

代码如下:

window.onload = function(){
var price = document.getElementById('price');
price.disabled = true;
price.style.padding = '2px 3px';
price.style.background = '#eee';
price.style.border = '1px solid #ccc';
var tj = document.getElementById('tj');
tj.onclick = function(){
if(tj.checked == true){ //可编辑
price.disabled = false;
price.style.background = '#fff';
price.style.border = '2px solid #ff7d00';
price.style.padding = '2px 3px';
price.focus();

} else {
price.disabled = true;
price.style.background = '#eee';
price.style.border = '1px solid #ccc';
price.style.padding = '2px 3px';
}
}

}

代码如下:

<form action="#">
价格：<input id="price" type="text"> <input id="tj" hidefocus=true type="checkbox">特价
</form>

唯一的可去之外是加了一点美化，使用户体验更加一层楼，其中包括边框的加粗，焦点的获取，checkbox边框线的隐藏等等。
测试代码

window.onload = function(){
var price = document.getElementById('price');
price.disabled = true;
price.style.padding = '2px 3px';
price.style.background = '#eee';
price.style.border = '1px solid #ccc';
var tj = document.getElementById('tj');
tj.onclick = function(){
if(tj.checked == true){ //可编辑
price.disabled = false;
price.style.background = '#fff';
price.style.border = '2px solid #ff7d00';
price.style.padding = '2px 3px';
price.focus();

} else {
price.disabled = true;
price.style.background = '#eee';
price.style.border = '1px solid #ccc';
price.style.padding = '2px 3px';
}
}

}

价格： 特价

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 勾选时激活input 否则禁用的javascript代码

    复制代码 代码如下: window.onload = function(){ var price = document.getElementById('price'); price.disabled = true; price.style.padding = '2px 3px'; price.style.background = '#eee'; price.style.border = '1px solid #ccc'; var tj = document.getElementById('tj'

  • C# DataGridView中实现勾选存储数据和右键删除数据(示例代码)

    C# DataGridView中实现勾选存储数据和右键删除数据(示例代码)

    DataGridView事件CellContentClick 触发dataGridView的CellContentClick事件,并且在事件中调用Edit 方法. 实现DataGridView中添加CheckBox后不满足条件去掉勾选 并且实现勾选后将绑定数据的存入表的动作 点击确定后去掉勾选 Main.cs private void tabControl1_SelectedIndexChanged(object sender, EventArgs e) { switch (this.tabCo

  • 验证用户必选CheckBox控件与自定义验证javascript代码

    验证用户必选CheckBox控件与自定义验证javascript代码

    CheckBox控件,由于它的值是选择与非选择.因此在提交数据时,想让用户必须选择CheckBox,普通情况之下,不好做验证. 但我们可以使用asp:CustomValidator来验证,不过还得写自定义验证Javascript代码,可参考如下: 复制代码 代码如下: function ValidateCheckBox(sender, args) { var checkbox = document.getElementById("<%=CheckBox1.ClientID %>&qu

  • input 日期选择功能的javascript代码

    input 日期选择功能的javascript代码

    document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' <'); document.writeln(' '); document.writeln('

  • jQuery判断复选框是否勾选的原理及示例

    jQuery判断复选框是否勾选的原理及示例

    今天要实现一功能就是:复选框勾选时给input表单赋值,复选框取消时将表单值清除. 效果如图:  实现源码:cyfID为复选框的id 复制代码 代码如下: $("#cyfID").click(function(){ var ischeck=$(this).attr("checked"); if(ischeck==undefined){ //清除输入框 alert(""); }else{ //给输入框赋值 alert("qq")

  • layui表格分页 记录勾选的实例

    layui 分页之后没有记录之前勾选项的功能 , 自己写了一个 , 主要点就是表格的done 函数 ,每次渲染完成之后做表格勾选操作.然后需要一个全局变量记录所有已经勾选的项 .下面是自己的代码 . 首先,监听表格的复选框点击事件 , 将单选或全选全部记录下来 var checkArray = new Array(); // 当前页数据 var currentArray ; //监听行单击事件(单击事件为:rowDouble) table.on('checkbox(test)', functio

  • 解决jquery操作checkbox火狐下第二次无法勾选问题

    最近在工作中使用jquery操作checkbox,使用下面方法进行全选.反选: 复制代码 代码如下: var ischecked=allCheckObj.is(':checked'); ischecked?checksObj.attr('checked',true):checksObj.attr('checked',false); 调试时在ie没有问题,考虑到兼容性,试试了firefox,遇到了问题.于是乎,做了如下实验: 复选框绑定了click事件,点一次选中,再点击取消选中,依次类推.这个功

  • 利用原生js和jQuery实现单选框的勾选和取消操作的方法

    根据以下的Demo,大概就可以看的明白 Demo: <html> <head> <script src='jquery-1.9.1.min.js'></script> <script> window.onload = function(){ var dom_a = document.getElementById('a1'); var dom_b = document.getElementById("b1"); //alert(

  • jquery checkbox无法用attr()二次勾选问题的解决方法

    今晨,漂亮的测试妹妹提了个奇怪的bug,说我一功能checkbox时隐时现,比如第一次打开有勾选,第n次打开可能就不选了. 想到与美女有亲密接触机会,马上鸡动起来. 经过偶层层抽次剥茧(da da jiang you),终于知道了原因:attr()在二次选中勾选框时,失效. 比如,如下HTML页面,一点[选中].二点[取消选中].三点[选中],瞧,不行了呗. 1.html <!doctype html> <html lang="en"> <head>

  • jquery自动填充勾选框即把勾选框打上true

    jquery自动填充勾选框,即把勾选框打上(true),然后通过ajax方式获得勾选项列表,再把列表内的选项打上. 复制代码 代码如下: 下拉框<select name="makemodule" id="makemodule" style='width:130px' onchange='makemoduleSelected()'> <option value='1'>1</option> </select> selec

随机推荐