0

I am using bootstrap 3 and I have a menu item that is disabled; however, when I select it I am still taken to the reference:

<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="E1ActivitySelect.html">Activity - E1 Administration</a></li>
    <li><a href="#">Activity - E1</a></li>
    <li class="divider"></li>
    <li class="disabled"><a href="Camp.html">Camps</a></li>
    <li><a class="dropdown-item" href="#">Hikes</a></li>
    <li><a href="#">Major Events</a></li>
    <li><a href="#">Pen Pals</a></li>
</ul>

How do I stop being taken to the reference (i.e., truly disable).

My js:

$(document).ready(function(){

    $("#includedContent").load("Menu.html");

    $(".dropdown-menu li.disabled a").click(function() {
        return false;
    });

    $('[data-toggle="tooltip"]').tooltip();

    selectPerson();

}); // end document.ready
Glyn
  • 1,933
  • 5
  • 37
  • 60

3 Answers3

2

Bootstrap doesn't really disable the inner anchor it just looks disabled. The correct way to do this is to define the anchor with no href thus:

<li class="disabled"><a>Camps</a></li>

If you need to have the href there, you will have to disable the click via JavaScript or jQuery:

$(document).ready(function() {
  // For dynamically added elements
  $(document).on("click", ".dropdown-menu li.disabled a", function() {
    return false;
  });

  // For staticly loaded elemetns
  /*
  $(".dropdown-menu li.disabled a").click(function() {
    return false;
  });
  */
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="E1ActivitySelect.html">Activity - E1 Administration</a></li>
    <li><a href="#">Activity - E1</a></li>
    <li class="divider"></li>
    <li class="disabled"><a href="Camp.html">Camps</a></li>
    <li><a class="dropdown-item" href="#">Hikes</a></li>
    <li><a href="#">Major Events</a></li>
    <li><a href="#">Pen Pals</a></li>
  </ul>
</div>

If you are planning to add elements dynamically, you can attach the click handler to the document itself. The reason is because the event handlers in the jQuery code, are being attached the first time the page loads, when you add elements after page load, the code that attaches the event handling has run already so you either reattach the event handling to the newly inserted elements or just add it to the container element for these freshly loaded elements. document pretty much contains everyone so it's always a safe bet.

StaticBeagle
  • 5,070
  • 2
  • 23
  • 34
  • Hi StaticBeagle, to my rescue again :-) The first (no href) works and the second does not (no console error). If I use the first. How do I a) include the href and b) change the class to enabled on the page where I want to allow this selection please? – Glyn Jul 19 '18 at 22:43
  • @Glyn Hey long time =]. Since you need the `href` I think its best to take the `jQuery` route. I added a full snippet where I block the redirection using `jQuery`. Regarding b) do you plan to remove the disabled class dynamically once the page is loaded or do certain pages just have it fixed to enabled or disabled? – StaticBeagle Jul 19 '18 at 23:22
  • I tried this (copied the code) and while I get the red round circle with a line through it I am still redirected to the html page when I click. I will put the Ready Function in my question above. – Glyn Jul 20 '18 at 00:59
  • For b) I originally did not show the selection; however, people did not like this they preferred the selection to be shown and not available. So, I want to show it in the menu on all pages and only allow it to be selected on those pages that are appropriate. In this case a camp applies to an individual so can only be selected when in an individual's page. So greyed out and not delectable until I am in the required page(s) and then black and selectable. – Glyn Jul 20 '18 at 00:59
  • OK, I think I understand. This will work if the js is called from Menu.html; however, I am "$("#includedContent").load("Menu.html");" and then performing the jQuery and it does not recognise the html that has loaded. As I want to have a different result depending on which page is loaded I can not have the jQuery called from the Menu.html. Do I therefore need a different Menu.html to be included when the selection is active? I hope not! This must be a very common situation with a graceful solution. I hope! :-) – Glyn Jul 20 '18 at 01:32
  • @Glyn Dynamically loaded elements need to be handled a bit different. I've updated the snippet to deal with dynamically loaded elements and a small paragraph at the end explaining what it's required. – StaticBeagle Jul 20 '18 at 15:17
  • $(document) did the trick. I knew there had to be a graceful way to do this. Thank you so much. Next is to remove the class="disabled" when I am on the page that I want to allow this on so the user does not think it is disabled. Any hints? – Glyn Jul 21 '18 at 01:35
  • 1
    @Glyn look into `$("li.disabled").removeClass("disabled");` – StaticBeagle Jul 21 '18 at 16:52
0

to fully stop/disabled a link you can use href="javascript:void(0) , this will stop your href to your anchor tag

cute_programmer
  • 332
  • 3
  • 13
  • Thanks for your reply arnold. I was not sure of what this meant so I did a search and I do not believe this meets my requirements. Please see my other comments above and: https://stackoverflow.com/questions/1291942/what-does-javascriptvoid0-mean – Glyn Jul 19 '18 at 22:53
0

​You can use just one CSS line to avoid events on any link:

pointer-events: none;​
Rolanda
  • 328
  • 1
  • 9
  • Hi Arol, thanks for your response I found a css solution; however I think a jQuery solution will be better as I want it enabled, selectable /disabled, non selectable on different pages. I think turning this on and off via jQuery is the best solution. The menu code is static and is included in each page so I only need to make amendments to the menu once if there is a new feature. Happy to be proven wrong. This is the css I found .disabled { pointer-events:none; //This makes it not clickable opacity:0.6; //This grays it out to look disabled } – Glyn Jul 19 '18 at 22:48