Disable anchor tag in knockout.js

I need to disable the anchor tag inside a foreach loop of knockout.js in HTML.

Here is my code:

<a id="aQStreamSkype" data-bind="attr:{href: ''}, click: $parent.StoreUserClick,disable: ($data.SkypeId == 'null')">Skype </a>

Anchor tags cannot be disabled. The easiest is to use ko if binding and then render a span instead of the anchor if the skype id is null

<!-- ko if: skypeId === null -->
    <span >No Skype Id</span>
<!-- /ko -->
<!-- ko if: skypeId !== null -->
    <a id="aQStreamSkype" data-bind="attr:{href: ''}, click: $parent.StoreUserClick,text: skypeId"></a>
<!-- /ko -->

Here is a fiddle

knockout.js and disabling anchor tag, You need to capture click event in your binding handler. HTML: <a href="link" data-bind="disableClick: !enabled()">test</a> <br/><br/><br/> <input  2. Disable Anchor Tag using CSS. In this Method , we used a Simple CSS style ‘pointer-events‘ is given none .Now the Anchor link doesn’t click able but the mobile cursor will change as there is a link , to prevent it we have to set ‘cursor: default’ .


If there is no href attribute on a element but only an action in a click binding, then an easy way would be passing expression condition && handler to a click binding.

If condition is observable you'll need to add parentheses.

<a data-bind="click: flag1() && handler">Enabled link</a>
<a data-bind="click: flag2() && handler">Disabled link</a>

It will be evaluated as false if condition is false (so nothing will happen), and will be evaluated as a handler if condition is true.

Fiddle here

The "enable" and "disable" bindings, The disable binding works oppositely, causing the associated DOM element to be disabled when its value is true . These bindings are useful with form elements​  Enable Disable Anchor Tags (Links) using jQuery The following HTML Markup consists of three HTML Anchor Links (HyperLink) and a Button. When the Button is clicked, a jQuery Click event handler is executed.


First off, there's a school of thought with which I have some sympathy that says just don't do it. A hyperlink that does nothing is just text.

However, I can see the flip side of the coin - I came across this same problem because I am using a Bootstrap dropdown menu which contains anchor tags as menu options, and to my mind it gives a better user experience to show the menu options as disabled rather than just not show them at all, and I feel it's cleaner to 'disable' the hyperlink than to include markup for a hyperlink and a span with the same text and then conditionally show one or the other. So, my solution was:

<a data-bind="click: checkCondition() ? myFunction : null, css: { disabled: !checkCondition() }"></a>

Note that checkCondition() is a function which returns true or false, indcating whether the hyperlink should be enabled or not. The css binding is just styling the hyperlink to appear disabled - you may have to add your own .disabled CSS class if you're not using Bootstrap.

The key to this working is that the anchor has no href attribute, so it's useless as a hyperlink without the Knockout click binding, which means that you could just as easily use this method with any element type (e.g. this could be a clickable span as easily as an anchor). However, I wanted to use an anchor so that my styling continued to be applied without any extra work.

javascript Disable anchor tag in knockout.js?, javascript Disable anchor tag in knockout.js? ($data.SkypeId() !== 'null') <a  My problem was slightly different: I have anchor tags that define an href, and I want to use ng-disabled to prevent the link from going anywhere when clicked. The solution is to un-set the href when the link is disabled, like this:


Disable only works with form elements, not anchor tags. You could use the visible binding instead, and just hide the link if there is no user id. If you do want to show something even if there isn't a user id, then add a span with the opposite visible test, then one will be shown if there is a user id, and the other if there isn't:

<a id="aQStreamSkype" data-bind="attr:{href: ''}, click: $parent.StoreUserClick, visible: ($data.SkypeId !== 'null')">Skype </a>
<span class="notLink" data-bind="visible: ($data.SkypeId === 'null')">Skype </span>

As a side note, if SkypeId is an observable, you will need to call it as one in your comparison check:

($data.SkypeId() !== 'null')

Use disable binding to disable hyperlinks, Is there a good way to do this without a change to core knockout? Thanks,. Douglas. Sign in to reply. 9/13/11 Gopal Patel. can link be disabled  How to enable or disable an anchor using jQuery? For situations where you must put text or html content within an anchor tag, but you simply don't want any action to be taken at all when that element is clicked (like when you want a paginator link to be in the disabled state because it's the current page), simply cut out the href.


With some override magic you can get this behaviour without that your view or ViewModel code need changes

  (function () {
      var orgClickInit = ko.bindingHandlers.click.init;
      ko.bindingHandlers.click.init = function (element, valueAccessor, allBindingsAccessor, viewModel) {
          if (element.tagName === "A" && allBindingsAccessor().enable != null) {
              var disabled = ko.computed(function () {
                  return ko.utils.unwrapObservable(allBindingsAccessor().enable) === false;
              });
              ko.applyBindingsToNode(element, { css: { disabled: disabled} });
              var handler = valueAccessor();
              valueAccessor = function () {
                  return function () {
                      if (ko.utils.unwrapObservable(allBindingsAccessor().enable)) {
                          handler.apply(this, arguments);
                      }
                  }
              };

          }
          orgClickInit(element, valueAccessor, allBindingsAccessor, viewModel);
      };
  })();

When you include that code the enable binding will work for anhors

Fiddle, it uses my convention library so ignore that part http://jsfiddle.net/xCfQC/4/

I can disable anchor tag in Internet Explorer but not in Chrome , I am using below code to enable or disable the anchor tag. (http://knockoutjs.​com/documentation/enable-binding.html) says that the enable  The "enable" and "disable" bindings Purpose. The enable binding causes the associated DOM element to be enabled when its parameter value is true. The disable binding works oppositely, causing the associated DOM element to be disabled when its value is true. These bindings are useful with form elements like input, select, and textarea. Example


[100% Working Code] - Disable anchor tag in knockout.js, The Anchor tags is difficult to disabled. The simplest one is use the ko if binding and then provide a span rather the anchor if the skype id is null  Bootstrap has examples of applying the .disabled class to anchor tags, and I hate them for it. At least they mention that the class only provides a disabled style , but this is misleading. You need to do more than just make a link look disabled if you really want to disable it.


In KnockoutJS, how can I dynamically disable or enable a button , <button data-bind="enable: myBoolean">My Button</button>. JavaScript + Knockout.js 2.0.0 Tidy. 1. 1. ko.applyBindings({ myBoolean: ko.observable(true) });. What is Anchor Tag? Anchor tag, i.e. <a> defines a hyperlink which is used to link from one webpage to another webpage. Href is the most important attribute of Anchor tag which holds the destination link. Apart from href there are so many different attributes that can be used within <a> tag for various purposes. The anatomy of <a> tag is below


[Solved] Disable Anchor Tag in Chrome, div and anchor tag in CHROME[^] Go through this discussion also: https://​groups.google.com/forum/#!topic/knockoutjs/mWQ1nzEWQRw[^]. The attr binding; Control flow. The foreach binding; The if and ifnot bindings; The with and using bindings; The let binding; The component binding; Binding lifecycle events; Working with form fields. The click binding; The event binding; The submit binding; The enable and disable bindings; The value binding; The textInput binding; The hasFocus binding; The checked binding; The options binding