Question

我有“组件”包含不同的输入元素。这些组件有一个复选框，允许用户切换元素的启用/禁用。这是当前禁用输入和选择的代码。

 $(".activeComponentToggle input:checkbox").on("change", function () {
                if ($(this).is(':checked')) {
                    $(this).closest("div.component").addClass("activeComponentWell");
                    $(this).closest("div.component").removeClass("inactiveComponentWell");
                    $(this).closest("div.component").find("input.form-control").prop('disabled', false);
                    $(this).closest("div.component").find("select.form-control").prop('disabled', false);
                } else {
                    $(this).closest("div.component").addClass("inactiveComponentWell");
                    $(this).closest("div.component").removeClass("activeComponentWell");
                    $(this).closest("div.component").find("input.form-control").prop('disabled', true);
                    $(this).closest("div.component").find("select.form-control").prop('disabled', true);
                }
            });

现在我也有这种HTML元素

<div class="input-group date" id="datetimepickerRanged11">
<input type="text" id="datepickerRanged811" class="form-control">
<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div>

要禁用此元素，我需要取消绑定范围unbind("click");

的点击

我该怎么做？如果输入的next（）元素是span，我需要取消绑定它。

Answer 1

首先，您可以通过缓存选择器来干掉代码。其次，我不会取消绑定跨度的单击处理程序，因为当您需要重新附加它时会使它变得很痛苦。相反，我会使用data属性来指示span点击是否被阻止。像这样：

$(".activeComponentToggle input:checkbox").on("change", function () {
    var $component = $(this).closest("div.component");
    if ($(this).is(':checked')) {
        $component
            .addClass("activeComponentWell")    
            .removeClass("inactiveComponentWell");
            .find("input.form-control").prop('disabled', false).end()
            .find("select.form-control").prop('disabled', false).end()
            .find('span.input-group-addon').data('disabled', false)
    }
    else {
        $component
            .addClass("inactiveComponentWell")
            .removeClass("activeComponentWell")
            .find("input.form-control").prop('disabled', true).end()
            .find("select.form-control").prop('disabled', true).end()
            .find('span.input-group-addon').data('disabled', true)

    }
});

然后在span点击处理程序：

$('span.input-group-addon').click(function() {
    if (!$(this).data('disabled')) {
        // do something
    }
});

jQuery查找具有特定类型的下一个元素的元素

1 个答案: