{"id":76078,"date":"2016-09-21T11:14:40","date_gmt":"2016-09-21T15:14:40","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=76078"},"modified":"2017-07-12T03:46:05","modified_gmt":"2017-07-12T07:46:05","slug":"wordpress-disable-href-using-jquery","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-disable-href-using-jquery.html","title":{"rendered":"WordPress.How to disable href using jQuery"},"content":{"rendered":"<p>The following guide will show you how to disable links in <em>Cherry framework 3.x and Cherry Framework 4.x <\/em> based templates using <strong>jQuery<\/strong><\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/J_CRM4VCfak\"><\/iframe>\r\n<\/div>\r\n<p>&#33;Note, all of the custom <em>javascript<\/em> codes are to be added to the <strong>child theme<\/strong><em>js<\/em> files.<\/p>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n<ol>\r\n<li><p>The custom <em>js<\/em> file can be located following this path for both <em>Cherry Framework 3.x<\/em> and <em>Cherry Framework 4.x<\/em> based templates: \r\n<strong>wp-content&#47;themes\/themeXXXX\/js<\/strong>;<\/p><\/li>\r\n<li><p>In case the file cannot be located, you should create the file. Here are the guides on how to include custom js file:<\/p>\r\n     <ul class=\"list\">\r\n\t    <li><p>For <em>Cherry Framework 3.x based<\/em> templates: <a href=\"\/help\/wordpress-cherry-3-x-how-to-include-custom-js-file.html\" target=\"_blank\">WordPress Cherry 3.x. How to include custom JS file<\/a>;<\/p><\/li>\r\n\t\t<li><p>For <em>Cherry Framework 4.x based<\/em> templates: <a href=\"\/help\/cherryframework-4-how-to-include-custom-js-file.html\" target=\"_blank\">CherryFramework 4. How to include custom JS file<\/a>;<\/p><\/li>\r\n\t<\/ul>\r\n<\/li>\r\n<li>We will review 3 techniques that will help us disable the links;\r\n  <ul class=\"list\">\r\n     <li><p>The first one is by utilizing <em>preventDefault()<\/em> function;<\/p>\r\n     <pre class=\"brush:js\">$( document ).ready(function() {\r\n\t$('a').click(function(e) { \r\n\te.preventDefault(); \r\n}); <\/pre>\r\n       <p>The above code prevents the default behavior of the links, specifically this one will disable the links globally.\r\n\t      This is why the basic understanding of <em>CSS selectors<\/em> is required. The more refined <em>CSS selector<\/em> would be the following:<\/p>\r\n\t\t   <pre class=\"brush:js\">'a[href=\"the_link_to_be_disabled_here\"]'<\/pre>\r\n\t   <p>Where <strong>the_link_to_be_disabled_here<\/strong>, put the link you would like to lock.<\/p>\r\n    <\/li>\r\n\t<li><p>The second code which can be used to disable link is the following:<\/p>\r\n\t   <pre class=\"brush:js\">$( document ).ready(function() {\r\n\t$('a').removeAttr(\"href\");\r\n});<\/pre>\r\n\t\t<p>The above rule will remove the html <em>href<\/em> attribute. This attribute is responsible for the link&#8217;s destination. Once removed, the link will no longer be working.<\/p>\r\n\t<\/li>\r\n\t<li><p>The last way to remove the link is to simply lock it by utilizing the <em>click event<\/em> handler:<\/p>\r\n\t    <pre class=\"brush:js\">$( document ).ready(function() {\r\n\t$('a').click (function () {\r\n\t\treturn false; \r\n\t});\r\n});\r\n\t\t<\/pre>\r\n\t<\/li>\r\n  <\/ul>\r\n<\/li>\r\n<li><p>All of the codes have to be included inside the <em>$( document ).ready()<\/em> jQuery function. \r\nIt would be necessary to include this function if you are adding custom jQuery codes to a newly-created js file \r\nsince the code can run only once the <strong>DOM (Document Object Model)<\/strong> of the web page is ready to execute <em>JavaScript<\/em> code.<\/p><\/li>\r\n<li><p>In case there is an already existing JavaScript file with jQuery codes included, the bare function should be added at bottom before the closing brackets of <em>$( document ).ready()<\/em> function;<\/p><\/li>\r\n<li><p>One of the most important parts here is to select the correct link and locate a selector specific to this link. \r\nIt is recommended to utilize <em>browser inspector tools<\/em>, <a href=\"\/help\/developer-tools.html\" target=\"_blank\">this link<\/a> will provide you with more information on browser inspectors.\r\nIncorrect <em>CSS selector pattern<\/em> can result in unexpected work of more links around the entire website. \r\nMore information about selectors can be found <a href=\"http:\/\/www.w3schools.com\/cssref\/css_selectors.asp\" target=\"_blank\" rel=\"nofollow\">here<\/a>.<\/p><\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=J_CRM4VCfak?width=1280&amp;height=720\" rel=\"prettyPhoto\">WordPress.How to disable href using jQuery<\/a>\r\n<p>Also, enjoy more of our <a href=\"https:\/\/www.templatemonster.com\/wordpress-themes.php\" target=\"_blank\">WordPress themes<\/a> with Cherry Framework functionality.<\/p>\r\n\r\n<p>We would also recommend you to view the <a href=\"https:\/\/www.templatemonster.com\/blog\/2017-best-wordpress-themes\/\" title=\"Best WordPress Themes 2017\" target=\"_blank\">the Best WordPress Themes 2017<\/a> in case you need a wider choice of website building solutions.<\/p>","protected":false},"excerpt":{"rendered":"<p>The following guide will show you how to disable links in <em>Cherry framework 3.x and Cherry Framework 4.x <\/em> based templates using <strong>jQuery<\/strong><\/p>\n","protected":false},"author":111,"featured_media":76079,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[1583,1537,2474,813,521,1411],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/76078"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/111"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=76078"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/76078\/revisions"}],"predecessor-version":[{"id":81906,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/76078\/revisions\/81906"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/76079"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=76078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=76078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=76078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}