javascript - 如何在单击按钮或链接时重新禁用(禁用)文本框？

Question

我有一个脚本，可以在单击按钮时启用禁用的文本框。但是，我只是不知道如何再次重新禁用文本框。

代码如下。

HTML:

<div class="input-group">
  <label for="some-tbox" class="input-group-addon">Label:</label>
  <input id="some-tbox" type="text" class="input-box" value="some value" disabled>
  <span class="input-group-btn">
    <button class="enable" type="button">button</button>
  </span>
</div>

JS:

    $(".enable").click(function(){
        $(this).parent().parent().children(".input-box").removeAttr("disabled");
        $(this).toggleClass("disable");
        $(this).toggleClass("enable");
    });

    $(".disable").click(function(){
        $(this).toggleClass("enable");
        $(this).toggleClass("disable");
        $(this).parent().parent().children(".input-box").attr("disabled", "disabled");
    });

我用它做了一个 fiddle 。但是，它不起作用。 Here是链接。

Answer 1

无需添加和删除类，只需切换禁用属性即可:

$(".enable").click(function() {
    $(this).closest('.input-group').find('input').prop('disabled', !$(this).closest('.input-group').find('input').prop('disabled'))
});

<强> jsFiddle example