如何禁用动态创建 <li> 元件？

Question

我创建<ul>包含三个<li>我想使禁用我的一个<li>在一定的条件和其他插入一些文本<li>但失败了！

code

var d = document.createElement('div');
    d.className = "dataTables_paginate paging_bootstrap pagination";
    var UL = document.createElement('ul');
    var L1 = document.createElement('li');
    L1.className = 'prev';
    var A1 = document.createElement('a');
    A1.appendChild(document.createTextNode('← Previous'));
    A1.id = 'B1';
    L1.appendChild(A1);
    UL.appendChild(L1);
    var L3 = document.createElement('li');
    L3.className = 'active';
    var A3 = document.createElement('a');
    A3.appendChild(document.createTextNode('1'));
    L3.appendChild(A3);
    UL.appendChild(L3);
    d.appendChild(UL);
    var L2 = document.createElement('li');
    L2.className = 'next';
    var A2 = document.createElement('a');
    A2.appendChild(document.createTextNode('Next →'));
    L2.appendChild(A2);
    A2.id = 'B2';
    UL.appendChild(L2);
   var root = document.getElementById('rose');
   root.appendChild(d);

我想禁用B1。 我试过以下代码：

script

  $('#B1').attr("disabled", true);

Answer 1

尝试使用.off() ：

$('#B1').off("click");

仅供参考：

只有表单输入元素具有被禁用的属性，无论是键入text ， select checkbox buttons等。

Answer 2

虽然li元素没有禁用状态，但是您可以模拟所需的行为，如下所示：

$('#B1').css("color","gray").css("text-decoration","none");

这将使它看起来好像已禁用（不会带下划线，并显示为灰色）。

此外，如果您还需要禁用与其关联的事件监听器，则必须使用off（） ：

$('#B1').off("click");

此外，如果元素是链接，则必须通过以下方式防止其被单击：

$('#B1').click(function() {
    $(this).preventDefault();  // prevent the default action
    $(this).stopPropagation(); // prevent event from bubbling up
    return false;              // just to be sure
}