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

这应该有所帮助：

Article
   attributes: { all your properties from the JSON of each object }

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

Answer 3

对于Jquery 1.6+，您可以使用

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

Answer 4

您可以将 prop() 与回调功能一起使用，这将切换已禁用的属性

＆＃13;

$("#lock").click(function(e) {
  $("#sender,#message").prop('disabled', function(i, v) {
    return !v;
  });
});

＆＃13;

<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>

＆＃13;

如果您只想执行一次，请使用 one()

＆＃13;

$("#lock").one('click', function(e) {
  $("#sender,#message").prop('disabled', function(i, v) {
    return !v;
  });
});

＆＃13;

<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>

＆＃13;

单击启用和禁用输入字段（不切换）

4 个答案: