Question

我有一个表单，其中一个文本输入设置为禁用。重要的是我们保留此文本输入，但它使一些用户感到困惑。他们尝试点击并编辑并认为表单已损坏，因为他们无法编辑该框。

我尝试添加onclick来触发window.alert框，警告他们无法编辑此文本输入。我无法让它发挥作用。

有没有人知道如何使用jquery，如果他们点击禁用的文本输入，它会显示一个window.alert？

感谢您的帮助...

Answer 1

如何用class将输入字段包装到div上并在该div上触发它？

编辑：

如果你设置了z-index属性，它可以在Firefox中运行，绝对位置就像这样jsfiddle.net/aFnJt/3

Answer 2

选择带:disabled的元素，然后发出提醒：

$('form').on('click', 'input:disabled', function() {
  window.alert('This input is disabled');
});

Answer 3

Firefox兼容示例

$(function(){
$("INPUT:disabled")
.wrap("<span>")
.parent()
.css({
    display:'inline-block',
    position:'relative'
})
.append(
    $("<span>")
    .css({
        position:'absolute',
        top:'0',
        left:'0',
        width:'100%',
        height:'100%',
        xIndex: 9999
    })
    .click(function(){alert('Disabled');})
);
})

$(function(){
    $("INPUT:disabled")
    .wrap("<span>")
    .parent()
    .click(function(){alert('Disabled')});
})

Answer 4

考虑到Mikolaj's answer的Firefox问题，我认为你最好的选择是用样式div或类似替换字段。如果问题是人们对输入感到困惑，那么在视觉上使输入被禁用（并用文本替换它是一种很好的方法）。

Answer 5

从用户角度来看，我不希望看到使用警报框。以下是两个用户友好的替代方案。

http://jsfiddle.net/cPaNA/

$('input:disabled[value=a]').hide();              //hide it instead
$('input:disabled[value=b]').val('disabled');     //use value for a message

您还可以使用:disabled伪选择器使其被禁用的事实更加明显。

input:disabled { color: gray; }

Answer 6

使字段readonly可以提供帮助，因为将触发click事件。虽然要注意differences in behaviour。

<input type="text" name="yourname" value="Bob" readonly="readonly" />

（感谢@Will的想法）

Answer 7

更新 ...

尝试在span或div中包装已禁用的输入，并为该元素指定一个id并将其用作jQuery选择器：

 $(document).ready(function() {
    $('#ID').click(function() {
        alert('This input is disabled');
    });
});

link：http://api.jquery.com/click/

Jquery - 单击禁用的文本输入时显示javascript警告框

7 个答案:

Firefox兼容示例