如题所述
第1个回答 2023-01-04
更新。我设法通过在"提交"按钮上添加一个伪造的div并侦听该div上的事件来解决此问题(我还将z-index更改为-200以启用对按钮本身的点击):
1
<input id="subm_tc" class="btn btn-primary" type="submit" disabled="" value="Log in" name="Submit">
现在它可以正常工作了
相关讨论
尝试对禁用的元素使用onmousedown事件。
浏览器应该以最终用户理解点击毫无意义的方式呈现禁用的按钮。他们通常会做得很好。也许您的警报不是必需的。
愚蠢的人可能会一直点击直到一天结束,直到他们意识到自己应该选中"接受条款"框。
这个概念对用户不直观...如果禁用,为什么他们会喜欢它?
然后不要禁用它,并在他们单击它时使用验证来显示错误
为什么您要提醒"已选中"?
警报"已检查"仅用于测试
它不是复杂的形式,而只是一个登录部分。无论如何,添加一个绝对位置的div似乎是最简单的解决方案-请参阅更新。
我的解决方案是将按钮放在div中,这是可单击的。当禁用按钮时,div具有按钮的宽度和高度,因此单击按钮将触发div。启用按钮后,div会缩小为0宽度0 height,因此click事件将向按钮而不是div注册。此代码还包括用于切换按钮的一些演示代码,该切换按钮用于切换相关按钮的启用/禁用状态
小提琴:
HTML
单击"切换"以启用或禁用"按钮"。单击它,可以看到一个事件在启用时触发,而另一个在禁用时触发。
1
2
3
4
<input type=button value='toggle' id='toggle'>
<input id=theButton type=button disabled value='Button'>
CSS
1
2
3
4
5
#clickable{
position:absolute;
width:55px;
height:25px;
}
JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(document).ready(function () {
$('#clickable').on('click',function () {
if ($('#theButton:disabled').length>0)
{
$('#clicks').append('|Disabled Button Clicked|');
}
else
{
//do nothing and let the button handler do it
$('#theButton').click();
}
});
$('#theButton').on('click',function() {
$('#clicks').append('|ENABLED button clicked|');
});
$('#toggle').on('click',function() {
if ($('#theButton:disabled').length>0)
{
$('#theButton').removeAttr('disabled');
$('#clickable').css({'width':'0px','height':'0px'});
}
else
{
$('#theButton').attr('disabled','disabled');
$('#clickable').css({'width':'55px','height':'25px'});
}
});
});
相关讨论
最后,在测试了所有这些选项之后,我得到了更新的解决方案(请参阅我的文章)UPDATE。它与您的非常相似,并且更简单一些,因为我们仅使用z-index来回移动可点击的div。不管怎么说,还是要谢谢你。
嗯,是的,无论您的喜好如何,将大小设为0或翻转z-index都差不多。
1
<input id="subm_tc" class="btn btn-primary" type="submit" disabled="" value="Log in" name="Submit">
现在它可以正常工作了
相关讨论
尝试对禁用的元素使用onmousedown事件。
浏览器应该以最终用户理解点击毫无意义的方式呈现禁用的按钮。他们通常会做得很好。也许您的警报不是必需的。
愚蠢的人可能会一直点击直到一天结束,直到他们意识到自己应该选中"接受条款"框。
这个概念对用户不直观...如果禁用,为什么他们会喜欢它?
然后不要禁用它,并在他们单击它时使用验证来显示错误
为什么您要提醒"已选中"?
警报"已检查"仅用于测试
它不是复杂的形式,而只是一个登录部分。无论如何,添加一个绝对位置的div似乎是最简单的解决方案-请参阅更新。
我的解决方案是将按钮放在div中,这是可单击的。当禁用按钮时,div具有按钮的宽度和高度,因此单击按钮将触发div。启用按钮后,div会缩小为0宽度0 height,因此click事件将向按钮而不是div注册。此代码还包括用于切换按钮的一些演示代码,该切换按钮用于切换相关按钮的启用/禁用状态
小提琴:
HTML
单击"切换"以启用或禁用"按钮"。单击它,可以看到一个事件在启用时触发,而另一个在禁用时触发。
1
2
3
4
<input type=button value='toggle' id='toggle'>
<input id=theButton type=button disabled value='Button'>
CSS
1
2
3
4
5
#clickable{
position:absolute;
width:55px;
height:25px;
}
JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(document).ready(function () {
$('#clickable').on('click',function () {
if ($('#theButton:disabled').length>0)
{
$('#clicks').append('|Disabled Button Clicked|');
}
else
{
//do nothing and let the button handler do it
$('#theButton').click();
}
});
$('#theButton').on('click',function() {
$('#clicks').append('|ENABLED button clicked|');
});
$('#toggle').on('click',function() {
if ($('#theButton:disabled').length>0)
{
$('#theButton').removeAttr('disabled');
$('#clickable').css({'width':'0px','height':'0px'});
}
else
{
$('#theButton').attr('disabled','disabled');
$('#clickable').css({'width':'55px','height':'25px'});
}
});
});
相关讨论
最后,在测试了所有这些选项之后,我得到了更新的解决方案(请参阅我的文章)UPDATE。它与您的非常相似,并且更简单一些,因为我们仅使用z-index来回移动可点击的div。不管怎么说,还是要谢谢你。
嗯,是的,无论您的喜好如何,将大小设为0或翻转z-index都差不多。