济南网站建设,济南做网站,济南网站制作

在页面显示时 input文本框里的数据不允许编辑 但点击编辑按钮以后 input 都可以编辑

somnus 2017年09月08日 web前端 1680 0

html

<input type="text" disabled /><br />
<input type="text" disabled /><br />
<input type="text" disabled /><br />
<input type="text" disabled /><br />
<input type="text" disabled /><br />
<button>Enable Input</button>


js


$(function(){
    var disabled = true;
    $('button').click(function(){
        if(!disabled){
            $('input[type="text"]').attr('disabled', 'disabled');
            $(this).text('Enable Input');
        } else {
            $('input[type="text"]').removeAttr('disabled');
             $(this).text('Disable Input');
        }
        disabled = !disabled;
    });
});

原文链接:http://jsfiddle.net/f4r4dw3x/




 <style>.readonly input{border:none}</style>
<div id="dvInput" class="readonly">
 text1:<input type="text" readonly value="text1" /><br />
 text2:<input type="text" readonly value="text2" /><br />
</div>
<input type="button" value="编辑" onclick="btnClick(this)" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    function btnClick(btn) {
        var toEdit = btn.value == '编辑';
        $('#dvInput')[toEdit ? 'removeClass' : 'addClass']('readonly').find(':input').attr('readonly', toEdit ? false : true);
        btn.value = toEdit ? '保存' : '编辑';
        if (!toEdit) {//保存的ajax代码
            //..
        }
    }
</script>

3


<script type="text/javascript">
function kk(){
var gg = document.getElementById("name");
gg.readOnly=false;
}
</script>
<form action="/example/html/form_action.asp" method="get">
  
  <p>Name:<input type="text" name="email" /></p>
  <p>Country:<input id="name" type="text" name="country" 
  value="China" readOnly/></p>
  <input type="button" value="修改"  onclick="return kk()"/>
  <input type="submit" value="Submit"/>
</form>
<p>请在提交按钮上单击,输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

http://blog.csdn.net/sinat_38224744/article/details/70903954


身为程序员必须要知道的一点:软件开发的核心是什么
你是第一个吃螃蟹的人
  1. 摔跤爱好
    摔跤爱好
    (2017-09-09 11:16:59) 1#

    给力

  2. 红色火线
    红色火线
    (2017-09-09 10:55:42) 2#

    很不错啊

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Top