[英]Enable and Disable Input Field On Click (not toggle)
Q: How do i make a field disable and then another one enable when clicking on an anchor tag. 问:如何使字段禁用,然后在单击锚标记时启用另一个字段。
Progress so far: Disabling the field works, but Re-enabling the field is just another click away unfortunately. 到目前为止的进展:禁用该字段有效,但不幸的是,重新启用该字段只是另一个点击。 Also, the second field doesn't get enabled on the click. 此外,单击时不会启用第二个字段。
// 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>
What you could do is remove the handler after the click if you only want it to be done once. 你可以做的是在点击之后删除处理程序,如果你只想要它完成一次。 Something like this: 像这样的东西:
var lockHandler = function () {
$('#sender').attr('disabled', 'disabled');
$('#message').attr('disabled', null);
$('#lock').off('click', lockHandler);
}
$('#lock').on('click', lockHandler);
Probably also want to check to make sure there is an actual user name entered before removing it. 可能还想检查以确保在删除之前输入了实际的用户名。
This should help: 这应该有所帮助:
$("#lock").click(function(){
$("#sender").attr('disabled', !$("#sender").attr('disabled'));
$("#message").attr('disabled', !$("#message").attr('disabled'));
});
Working Fiddle: http://jsfiddle.net/4u5yuu6f/ 工作小提琴: http : //jsfiddle.net/4u5yuu6f/
For Jquery 1.6+ you can use 对于Jquery 1.6+,您可以使用
$("input").prop('disabled', true);
$("input").prop('disabled', false);
You can use prop()
with callback function , this will toggle the disabled property 您可以将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>
If you want only execute it once then use one()
如果你只想执行一次然后使用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.