数据属性未定义

Question

我有一个文本框和一个复选框：

<input type="text" id="tb1" onFocus="CheckboxDisable('cb1');" />
<input type="checkbox" id="cb1" data-ieflub=""/>

当文本框成为焦点时，我想禁用该复选框并将数据属性ieflub设置为值。我的代码如下：

function CheckboxDisable(id){
    document.getElementById(id).disabled = true;

    $('#id').attr('ieflub', 'yes');
}

如你所见，非常简单。除此之外，它不起作用。

我使用Firebug进行了跟踪，看到CheckboxDisable函数中未定义$('#id').data('data-ieflub');。

为什么？

Answer 1

您正在传递一些未声明的（看起来像）变量cb1，而根据您在CheckboxDisable函数中的使用方式，您希望传递字符串cb1：

<input type="text" id="tb1" onFocus="CheckboxDisable('cb1');" />
<input type="checkbox" id="cb1" data-ieflub=""/>

同样在函数中，您需要使用变量构造选择器：

function CheckboxDisable(id) {
    document.getElementById(id).disabled = true;
    $('#' + id).data('ieflub', 'yes');
}

请注意，有一种方便的方法来处理数据属性$.fn.data。当然，您也可以使用attr方法，但在这种情况下，您应该使用完整的属性名称.attr('data-ieflub', 'yes')。使用data方法，应删除前缀数据。

最后，完全使用jQuery并从

更改是有意义的

document.getElementById(id).disabled = true;

到$()方法。额外优化后的最终功能将变为：

function CheckboxDisable(id) {
    $('#' + id).prop('disabled', true).data('ieflub', 'yes');
}

使用的新方法：

• $.fn.prop获取/设置DOM元素属性，如已禁用，已检查等
• $.fn.data获取/设置数据属性，读取数据属性。

Answer 2

'#id'中的$('#id').attr('ieflub', 'yes');是一个普通的字符串 - 它不会被'#cb1'替换为您所希望的。请改为$('#' + id).attr('ieflub', 'yes');。

您的html中也存在问题 - 将onFocus="CheckboxDisable(cb1);"替换为onFocus="CheckboxDisable('cb1');" - 您希望传递id的字符串，而不是名为cb1的变量。