Отключить/разрешить поле ввода при нажатии

Question

В: Как отключить поле, а затем активировать его при нажатии на тег привязки.

Прогресс до сих пор: отключение поля работает, но, к сожалению, повторное включение поля - это еще один клик. Кроме того, второе поле не активируется при нажатии.

JSFIDDLE: http://jsfiddle.net/ooq765hq/ (с дальнейшими инструкциями и прогресс)

КОД:

<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="submit" id="send" value="send message"/>   
</form> 

JS:

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

Answer 1

Что вы можете сделать, это удалить обработчик после щелчка, если вы хотите это сделать один раз. Что-то вроде этого:

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

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

Возможно также хотят, чтобы проверить, чтобы убедиться, что это фактическое имя пользователя, введенное перед его удалением.

Answer 2

Вы можете использовать prop() с функцией обратного вызова, это будет переключать объект для инвалидов

$("#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>

Answer 3

Это должно помочь:

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

Рабочая Fiddle: http://jsfiddle.net/4u5yuu6f/

Answer 4

Для Jquery 1.6+ вы можете использовать

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