Question

我有一个文本输入字段和一个复选框。当且仅当文本字段中有输入时，才必须禁用该复选框。我有一个适用于大多数场景的解决方案：

HTML：

<input type="text" id="search" />
<input type="checkbox" id="cb" />
<label for="cb">Enabled only if no search term</label>

jQuery的：

$('#search').keyup(function (e) {
    var enable = $(this).val() == 0;
    if (enable) {
        $('#cb').removeAttr('disabled');
    } else {
        $('#cb').attr('disabled', 'disabled');
    }
});

见live on jsFiddle。

当使用键盘输入或删除文本以及使用键盘粘贴文本时，此方法有效。

如果用户使用右键单击上下文菜单粘贴文本，或者用户按下IE添加到输入字段的小“X”以允许清除输入字段，则会失败。

问题

如何改进代码以使其在这些场景中也能正常工作？等待文本框失去焦点会提供较差的用户体验。

Answer 1

Real Time Validation jQuery插件解决了这个问题。但是，它与委派事件一起not seem to work currently。

实现此操作需要将事件绑定到keyup事件，如果要在剪切和粘贴时检测文本更改，还需要执行其他几个事件。即使你是一个JavaScript神，一遍又一遍地写这个逻辑也是很乏味的。要聪明并使用ZURB文本更改事件插件。

Answer 2

您可以使用jquery更改方法：

http://jsfiddle.net/WDMCX/1/

$('#search').change(function() {

    if( $(this).val() === '' ){
        $('#cb').attr('disabled', 'disabled');
    } else {
        $('#cb').removeAttr('disabled');
    }

});

通过鼠标操作更改浏览器文本输入时发生反应

2 个答案: