Question

我有一些列表项，如果单击任何列表项，则通过添加类.selected来选择它如果我在列表项外部单击，则所有列表项都将被取消选中。的 FIDDLE

我最初还禁用了一个按钮。我想通过在选择列表项时删除＆＃34;已禁用＆＃34; 属性来激活按钮。

如果我在外面点击，则应该取消选择所有列表项并再次禁用该按钮。我怎么能这样做？任何帮助将不胜感激。

JS

$(".list-group-item").click(function() {
    $('.list-group-item').removeClass('selected');
    $(this).addClass('selected');
});

$(document).on('click', function (e) {
    if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
      $('.list-group-item').removeClass('selected'); 
    }
});

Answer 1

你所缺少的是如何启用/禁用你的按钮，这是

$('.load-table').prop('disabled',false); // or true to disable

所以只需根据需要插入

$(".list-group-item").click(function() {
    $('.list-group-item').removeClass('selected');
    $(this).addClass('selected');
    $('.load-table').prop('disabled',false);
});

$(document).on('click', function (e) {
    if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
      $('.list-group-item').removeClass('selected'); 
        $('.load-table').prop('disabled',true);
    }
});

http://jsfiddle.net/has9L9Lh/22/

Answer 2

改为使用.hasClass()并设置其他条件并禁用和启用按钮使用.prop()

$(".list-group-item").click(function(e) {
    e.stopPropagation();
    $('.list-group-item').removeClass('selected');
    $(this).addClass('selected');
    $('.load-table').prop('disabled',false);
});

$(document).on('click', function (e) {
    if ($(e.target).hasClass("list-group")) {
      $('.list-group-item').removeClass('selected'); 
    }
    else{
        $('.list-group-item').removeClass('selected'); 
        $('.load-table').prop('disabled',true);
    }
});

Demo

Answer 3

使用jquery的attr（）属性。

$(".list-group-item").click(function () {
    $('.list-group-item').removeClass('selected');
    $(this).addClass('selected');

    if ($("button").attr("disabled") === "disabled") {
        $("button").attr("disabled", false);
    }
});

$(document).on('click', function (e) {
    if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
        $('.list-group-item').removeClass('selected');


        $("button").attr("disabled", true);

    }
});

以上代码应该有效。单击该项目时，请检查该按钮是否仍处于禁用状态。如果是，则启用按钮。

当用户在列表外单击时也是如此。

Fiddle

如果找到特定的类，如何添加和删除属性

3 个答案:

Demo