jquery 如何检测,单击禁用复选框上的()

jxct1oxe  于 2022-12-12  发布在  jQuery
关注(0)|答案(5)|浏览(125)

js/jQuery:

$('input[type=checkbox]').click(function(){
  // Does not fire if I click a <input type="checkbox" disabled="disabled" />
});

当有人点击一个禁用的复选框时,我如何使jQuery中发生一些事情?

1dkrff03

1dkrff031#

再次阅读有关从JoãoSilva使用readonly的注解。您可以使用该注解并将其与click事件中的某些逻辑联系起来。
使用readonly会给你禁用的外观,就像disabled一样,但它仍然允许你点击它。
按如下方式使用readonly:

<input type="checkbox" readonly="readonly">​

然后在脚本中取消该事件(如果设置了readonly)。

$('input[type=checkbox]').click(function() {
    var isReadOnly = $(this).attr("readonly") === undefined ? false : true;

    if (isReadOnly) {
        return false;
    }

    // other code never executed if readonly is true.
});
​
DEMO(第一个字母)
tag5nh1u

tag5nh1u2#

您将无法在所有浏览器中可靠地捕获单击事件。最好的办法是在上面放置一个透明元素来捕获单击。
HTML语言

<div style="display:inline-block; position:relative;">
  <input type="checkbox" disabled="disabled" />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​

JavaScript语言

$(':checkbox:disabled').next().click(function(){
    var checkbox = $(this.prevNode);
    // Does fire now :)
});

注:这是我改进的this question的一个想法。

nc1teljy

nc1teljy3#

你不能......但是你可以通过在输入上放置一个div来伪装它,并在该div上定义click函数。

$('input').each(function(){
    if(true == ($(this).prop('disabled'))){
        var iTop = $(this).position().top;
        var iLeft = $(this).position().left;
        var iWidth = $(this).width();
        var iHeight = $(this).height();
    $('body').append('<div class="disabledClick" style="position:absolute;top:'+iTop+'px;left:'+iLeft+'px;width:'+iWidth+'px;height:'+iHeight+'px;background:transparent;"></div>');    
    }       
});

//delegate a click function for the 'disabledClick'.

$('body').on('click', '.disabledClick', function(){
   console.log('This is the click event for the disabled checkbox.');
});

Here's the working jsFiddle

vxqlmq5t

vxqlmq5t4#

我没有看到其他选项,如添加<div>块层超过复选框。因此,解决方案应该如下:

function addDisabledClickHandler(el, handler) {
    $("<div />").css({
        position: "absolute",
        top: el.position().top,
        left: el.position().left,
        width: el.width(),
        height: el.height()
    }).click(handler).appendTo("body");
}

var el = $("input[type='checkbox']");
addDisabledClickHandler(el, function() {
    alert("Clicked");
});​

演示:http://jsfiddle.net/q6u64/

q35jwt9p

q35jwt9p5#

实际上,我经常这样做,以阻止人们更改复选框,如果这些更改已经提交到数据库。但是,如果您想更改它或至少看到一个点击..那么我只需要将输入 Package 在一个标签元素中,并检查子输入。
于飞:

<label class="checkbox-label">
    <input class="input-checkbox" type="checkbox" name="declared" disabled checked>
</label>

查询:

$('.checkbox-label').on(function (e) {
    e.stopPropagation();
    let checkBox = $(this).find('.input-checkbox');

    // if checkbox is disabled, do something

    if (checkBox.prop('disabled')) {
        // I usually put some enter password to confirm change... but I know you want to just show a click

        console.log('click')
    } else {
        // your checkbox should act as normal

        console.log('click')
    }
})

希望这对你有帮助:)

相关问题