單擊啟用和禁用輸入字段（不切換）

Question

問：如何使字段禁用，然后在單擊錨標記時啟用另一個字段。

到目前為止的進展：禁用該字段有效，但不幸的是，重新啟用該字段只是另一個點擊。 此外，單擊時不會啟用第二個字段。

 // 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;"> &nbsp; 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> 

Answer 1

你可以做的是在點擊之后刪除處理程序，如果你只想要它完成一次。 像這樣的東西：

var lockHandler = function () {
    $('#sender').attr('disabled', 'disabled');
    $('#message').attr('disabled', null);
    $('#lock').off('click', lockHandler);
}

$('#lock').on('click', lockHandler);

可能還想檢查以確保在刪除之前輸入了實際的用戶名。

Answer 2

這應該有所幫助：

$("#lock").click(function(){
    $("#sender").attr('disabled', !$("#sender").attr('disabled')); 
    $("#message").attr('disabled', !$("#message").attr('disabled')); 
});

工作小提琴： http ： //jsfiddle.net/4u5yuu6f/

Answer 3

對於Jquery 1.6+，您可以使用

$("input").prop('disabled', true);
$("input").prop('disabled', false);

Answer 4

您可以將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;"> &nbsp; </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;"> &nbsp; </div> <input type="text" id="message" placeholder="comment here" autocomplete="off" disabled/> <input type="button" id="send" value="send message" /> </form>