Question

对于那些不能等待fiddle

的人

我正在开发类似这样的东西，我只是jQuery世界的新手:)我的问题是如何启用和禁用点击{{当我单击下面的禁用和启用按钮时，1}}元素:)非常感谢您的回答。我真的很感激。

预览代码：

HTML

<i>

CSS

<ul class="controls">
    <li><i class="fa fa-pencil" data="a1"></i></li>
    <li><i class="fa fa-trash" data="a2"></i></li>
    <li><i class="fa fa-align-justify" data="a3"></i></li>
</ul>

<span class="disable">Disable</span>
<span class="enable">Enable</span>

JS

.controls{
    list-style: none;
}

.controls li{
    display: inline-block;
    margin: 0px 5px;
}

.controls li i{
    cursor: pointer;
}

.disable,
.enable{
    margin: 10px;
    background: #000;
    color: #fff;
    padding: 3px 5px;
    cursor: pointer;
}

Answer 1

使用.off（）删除处理程序

$(document).ready(function() {
  function handler() {
    alert($(this).attr("data"));
  };
  $('.controls li i').click(handler);

  $('.disable').click(function() {
    $('.controls li i').off('click', handler);
  })
  $('.enable').click(function() {
    //off is used here so that duplicate handler registration won't happen if you click on enable twice
    $('.controls li i').off('click', handler).click(handler);
  })
});

.controls {
  list-style: none;
}
.controls li {
  display: inline-block;
  margin: 0px 5px;
}
.controls li i {
  cursor: pointer;
}
.disable,
.enable {
  margin: 10px;
  background: #000;
  color: #fff;
  padding: 3px 5px;
  cursor: pointer;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="controls">
  <li><i class="fa fa-pencil" data="a1"></i></li>
  <li><i class="fa fa-trash" data="a2"></i></li>
  <li><i class="fa fa-align-justify" data="a3"></i></li>
</ul>

<span class="disable">Disable</span>
<span class="enable">Enable</span>

Answer 2

你可以这样做：

$('.disable').click(function(){
    $('.controls li i').removeClass('clickable');
});

$('.enable').click(function(){
    $('.controls li i').addClass('clickable');
});

$('.clickable').click(function(){
    //actions you want
});

禁用单击html元素jQuery

2 个答案: