如何使用jQuery禁用i元素

Question

为什么不能i元素没有被禁用。当我点击禁用按钮时，我想让它不可点击

JSFiddle

Html

<i class="foo">Click Me to see if i am disabled.</i>
<button type="button" id="btn">
Disable
</button>

JS

$(".foo").click(function(){
var isDisabled =  $(".foo").is(":disabled");
alert("Is foo disabled: " + isDisabled);
})
$("#btn").click(function(){
$(".foo").css("color","red");
$(".foo").prop("disabled",true);
})

Answer 1

<i>元素不是按钮；给它们一个disabled属性并没有任何作用。

如果你想做这样的事情，可以把它变成一个按钮，或者在上面切换一个类来指示它是否可以点击。

$(".foo").click(function(){
var isDisabled =  $(".foo").is(":disabled");
alert("Is foo disabled: " + isDisabled);
})
$("#btn").click(function(){
$(".foo").css("color","red");
$(".foo").prop("disabled",true);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="foo">Click Me to see if i am disabled.</button>
<button type="button" id="btn">
Disable
</button>

或

$(".foo").click(function() {
var isDisabled = $(this).is(".disabled");
alert("Is foo disabled: " + isDisabled);
})
$("#btn").click(function() {
$(".foo").css("color", "red");
$(".foo").toggleClass("disabled");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<i class="foo">Click Me to see if i am disabled.</i>
<button type="button" id="btn">
Disable
</button>

Answer 2

试试这个

$(".foo").click(function(){
var isDisabled =  $(".foo").prop("disabled");
alert("you clicked foo " + isDisabled);
})
$("#btn").click(function(){
$(".foo").off('click');
})

Answer 3

在提醒消息之前，您需要检查i是否已禁用。使用if(isDisabled) return;在标记元素的click事件处理程序中声明isDisabled之后添加此行。对不起，我没有格式化回复。我现在只是在用手机。

只需将代码的第一部分替换为：

$(".foo").click(function(){
var isDisabled =  $(".foo").is(":disabled");
If(isDisabled) return; // exit function
alert("Is foo disabled: " + isDisabled);
});

Answer 4

$('.foo').css('pointer-events','none');      

或者只应用这样的类：

CSS：

.disabledClass{
pointer-events: none;
}

JavaScript:

$('.foo').addClass('disabledClass')