[英]Enable and Disable Input Field On Click (not toggle)
问:如何使字段禁用,然后在单击锚标记时启用另一个字段。
到目前为止的进展:禁用该字段有效,但不幸的是,重新启用该字段只是另一个点击。 此外,单击时不会启用第二个字段。
// When clicking "Lock your username" that input field should be disabled, //and the Comment section should be enabled $("#lock").click(function() { $("#sender").attr('disabled', !$("#sender").attr('disabled')); $("#message").attr('disabled', !$("#message").attr('enabled')); }); //problems right now: // clicking twice re-enables the field. // from what i've understood, disabled fields cannot be targeted with event handlers? // //
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="formInput"> <input type="text" id="sender" placeholder="Your Name" /> <a id="lock" style="border:1px solid rgba(000,200,000,0.5);background:#ccc;cursor:pointer;padding:2px;width:150px">Lock your username</a> <div id="messages" style="height:100px; border:1px solid #000;width:200px;"> Messages will go here </div> <input type="text" id="message" placeholder="write your comment here" autocomplete="off" disabled /> <input type="submit" id="send" style="border:1px solid rgba(000,200,000,0.5);background:#ccc;cursor:pointer;padding:2px;width:150px" value="send message" /> </form>
你可以做的是在点击之后删除处理程序,如果你只想要它完成一次。 像这样的东西:
var lockHandler = function () {
$('#sender').attr('disabled', 'disabled');
$('#message').attr('disabled', null);
$('#lock').off('click', lockHandler);
}
$('#lock').on('click', lockHandler);
可能还想检查以确保在删除之前输入了实际的用户名。
这应该有所帮助:
$("#lock").click(function(){
$("#sender").attr('disabled', !$("#sender").attr('disabled'));
$("#message").attr('disabled', !$("#message").attr('disabled'));
});
工作小提琴: http : //jsfiddle.net/4u5yuu6f/
对于Jquery 1.6+,您可以使用
$("input").prop('disabled', true);
$("input").prop('disabled', false);
您可以将prop()
与回调函数一起使用,这将切换disabled属性
$("#lock").click(function(e) { $("#sender,#message").prop('disabled', function(i, v) { return !v; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form id="formInput"> <input type="text" id="sender" placeholder="Your Name" /> <a id="lock" style="border:1px solid rgba(000,200,000,0.5);">Lock your username</a> <div id="messages" style="height:100px; border:1px solid #000;width:200px;"> </div> <input type="text" id="message" placeholder="comment here" autocomplete="off" disabled/> <input type="button" id="send" value="send message" /> </form>
如果你只想执行一次然后使用one()
$("#lock").one('click', function(e) { $("#sender,#message").prop('disabled', function(i, v) { return !v; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form id="formInput"> <input type="text" id="sender" placeholder="Your Name" /> <a id="lock" style="border:1px solid rgba(000,200,000,0.5);">Lock your username</a> <div id="messages" style="height:100px; border:1px solid #000;width:200px;"> </div> <input type="text" id="message" placeholder="comment here" autocomplete="off" disabled/> <input type="button" id="send" value="send message" /> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.