数据属性未定义

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 对此进行了追踪，发现 $('#id').data('data-ieflub'); 在 CheckboxDisable 函数中未定义。

为什么？

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');
}

使用的新方法：

Answer 2

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

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

Data attribute undefined