How to Disable a Specific Li Element Inside a Ul

How to disable a li/li tag?

yeah finaly its working, im founded the my own method

<li id="abc" style=" width:200px;border:solid 1px #b4123d;background-color:#b4123d;height:110px;margin-right:5px;line-height:45px;" class="btn  btn-primary disabled">

                            <span class="icon" style=" width:5px; height:5px; margin-top:-25px; margin-left:55px;">
                                <i aria-hidden="true"><span class="glyphicon glyphicon-user " true"></span></i>
                            </span>
                            <span style=" font-weight:bold; font-size:16px; line-height:85px; margin-left:65px;">Admin</span>

                    </li>

How to disable a dynamically created li element?

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
}

how to disable a li tag using JavaScript

You can add an onclick handler to the link that returns false.

document.getElementById("tab_c").childNodes[0].onclick = function() {return false;};​

The childNodes[0] just selects the first child which in this case is the <a>

E.g. http://jsfiddle.net/zYSeF/

How can I target and disable the nth LI in a UL list?

To change the disabled property you should use the .prop() function.

Try this:

$('li:eq(2)').prop('disabled', true);

Index for eq() begins at 0, so eq(2) would get the 3rd li

Disable `a` link inside ul issue

You can check if li has ul and disable a like this.

$('.level_1:has(ul) > a').removeAttr('href')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul>         <li class="level_1">    <a href="level1.html">Insulated And Extruded</a>    <ul class="level_2">      <li><a href="">TE77</a></li>      <li><a href="">TE78</a></li>      <li><a href="">T77</a></li>      <li><a href="">TS77</a></li>    </ul>  </li>  <li class="level_1"><a href="">Grille Type Rolling</a></li>  <li class="level_1"><a href="">PVC High Speed Doors</a></li>  <li class="level_1"><a href="">Swinging doors</a></li></ul>

Jquery remove element and remove the associated li

You can assign custom attribute to your li tag which is added dynamically and add that as well to your span tags then whenever your remove is click get the data-attribute of span and use this to remove li then reassign values to all elements .

Demo Code :

function resetIndexes() {
  var j = 1;
  $('.p_scnt:not(:first)').each(function() {
    j++;
    $(this).attr('name', 'p_scnt_' + j);
    $(this).text('Test ' + j);
    $(this).parent().attr("data-span", j) //add new data attr
    $(this).parent().attr('id', "section-one-a" + j)
  });

}

function reset_list() {
  var j = 1
  //loop through dynamically created lis
  $('li[data-value]').each(function(index) {
    j++;
    $(this).attr('id', 'sec-a' + j); //chnage id
    $(this).attr("data-value", j) //chnage data value
    $(this).find("a").attr('href', '#section-one-a ' + j);
    $(this).find("a").text('Test ' + j)
  });

}
$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents .p_scnt').size() + 1;

  $('#addScnt').on('click', function() {
    i = $('#p_scents .p_scnt').size() + 1;
    $('#section-one-a1').clone().appendTo('#p_scents').prop('id', 'section-one-a' + i);
    $('<li id="sec-a' + i + '" data-value=' + i + '><a href="#section-one-a' + i + '">Test ' + i + '</a></li>').insertBefore("#addnew_a");
    $("#section-one-a" + i).attr("data-span", i)
    $("#section-one-a" + i + " #p_scnt").text('Test ' + " " + i);
    $('#section-one-a' + i + ' #remove').css("visibility", "visible");
    $('#section-one-a' + i + ' .remScnt').css("pointer-events", "auto");
    i++;
    return false;
  });

  $('#p_scents').on('click', '.remScnt', function() {
    if (i > 2) {
      var dat_span = $(this).closest('span[data-span]').data("span") //get attribute of span to remove
      $(this).parents('span').remove();
      $("#test li[data-value=" + dat_span + "]").remove() //use same to remove li
      resetIndexes();
      reset_list();

    }
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<ul id="test">
  <li class="static">Static</li>
  <li id="sec-a1">Test 1</li>
  <li id="addnew_a"><a href="#" id="addScnt">Add new Set</a></li>
</ul>

<div id="p_scents">
  <span id="section-one-a1">
                <div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>
                    <span id="remove" style="visibility: hidden;"><a href="#" style="color: black; pointer-events: none;" class="remScnt">Remove</a></span>
  </span>
</div>

---

Related Topics