i have created <ul> containing three <li>.i want to make disable one of my <li> on certain condition and insert some text in other <li> but failed.!

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

i want to B1 disable. i have tried following code:

script

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

i have created <ul> containing three <li>.i want to make disable one of my <li> on certain condition and insert some text in other <li> but failed.!

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

i want to B1 disable. i have tried following code:

script

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

• javascript
• jquery

• as you are using jQuery, you would have done it very easily using jQuery rather than JavaScript. – Ashish Kumar Commented Jan 15, 2014 at 15:08
• 4 There is no "disabled" attribute for li elements. What do you want a "disabled li" to do? Is it supposed to disable its child input controls? – Katie Kilian Commented Jan 15, 2014 at 15:08
• <li> don't have disabled state: w3schools./tags/tag_li.asp – Justinas Commented Jan 15, 2014 at 15:09
• actually i have click function on it, I do not want to call it, thats y making it disable... – user3119163 Commented Jan 15, 2014 at 15:09
• 1 @BaqerNaqvi you have to specify the event in the method $(this).off('click') – Jai Commented Jan 15, 2014 at 15:13

2 Answers 2

try with .off():

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

FYI:

Only form input elems are having property to get disabled, whether that is type text, select checkbox buttons etc.

While there is no disabled state for a li element, you can simulate the desired behavior like this:

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

Which will make it appear as if disabled (it will not be underlined and will appear grayed-out).

If in addition you need to disable the event listeners attached to it, you will have to use off():

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

Furthermore, if the element is a link, you will have to prevent it from being clickable, in the following way:

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