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");
    });

我已经做了一个小提琴。但是，它没有用。 Here是链接。

Answer 1

不要乱用添加和删除类，只需使用以下命令切换禁用的属性：

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

<强> jsFiddle example

Answer 2

问题在于这一行$(".disable").click(function(){ ...})

您将点击事件处理程序绑定到名为disabled的类，该类在页面加载期间最初不可用，稍后会动态显示。

您需要将事件处理程序委托给始终存在的某个父级，然后在那里处理事件，在这种情况下，您可以执行此操作：

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

jQuery's on功能

Answer 3

你不能绑定一个不存在的元素“.disable”，在这种情况下你可以在改变它的类时重新绑定它。代码背后可能对您有所帮助：

      $(".enable").on("click",enabledClick)
    function enabledClick (argument) {
        $(".enable").parent().parent().children(".input-box").removeAttr("disabled");
        $(".enable").toggleClass("disable");
        $(".enable").toggleClass("enable");
        $(".disable").on("click",disabledClick)
   
    }


    function disabledClick (argument) {
 		$(".disable").parent().parent().children(".input-box").attr("disabled", "");
    	$(".disable").toggleClass("enable");
        $(".disable").toggleClass("disable");
        $(".enable").on("click",enabledClick)
    }

如何在单击按钮或链接时重新禁用（禁用）文本框？

3 个答案: