i want to disable the anchor link and the glphyicon button on load and when one of the div is selected it should be enable ltdivgt ltdiv class34box 34gt ltp class34title34gt Truck typeltpgt ltdiv class34colmd12 34gt lta class34showSingle34 target34134gt ltdiv class3434gt ltdiv class34 vehicleitem paddingadjust34 style34height 0px margi

Hey vrunPlease refer below sampleHTMLltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery191jqueryminjs34gtltscriptgtltscript type34textjavascript34 src34httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs34gtltscriptgtltlink type34textcss34 rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss34 gtltscript type34textjavascript34gt documentreadyfunction 34colmd1234clickfunction 34open34show 34CONTAINER34show 34TRAILER34show 34inputgroupaddon34show ltscriptgtltdivgt ltdiv class34box 34gt ltp class34title34gt Truck typeltpgt ltdiv class34colmd1234gt lta class34sh

Disable HTML Anchor Link on PageLoad using jQuery

v@run

SOLVED CLOSED ACTIVE ANSWERED
User: v@run
Posted: on Dec 18, 2018 05:10 AM
Forum: HTML and CSS
Answer: 1
Views: 3179
Sample Code: Download

i want to disable the anchor link and the glphyicon button on load and when one of the div is selected it should be enable

<div>
    <div class="box ">
        <p class="title">
            Truck type</p>
        <div class="col-md-12 ">
            <a class="showSingle" target="1">
                <div class="">
                    <div class=" vehicle-item padding-adjust" style="height: 0px; margin-left: 249px;">
                        <img src="data:image/png;base64,iVBORw0KGgoAAAA...">
                        <span style="color: grey; margin-left: 16px; font-size: 15px; font-weight: bolder;">
                            OPEN</span>
                    </div>
                </div>
            </a><a class="showSingle" target="2">
                <div class="">
                    <div class="vehicle-item" style="height: 2px; margin-left: 466px;">
                        <img src="data:image/png;base64,iVBORw0KGgoAAAA...">
                        <span style="color: grey; margin-left: 16px; font-size: 15px; font-weight: bolder;">
                            CONTAINER</span>
                    </div>
                </div>
            </a><a class="showSingle" target="3">
                <div class="">
                    <div class="vehicle-item">
                        <img src="data:image/png;base64,iVBORw0KGgoAAAAN...">
                        <span style="color: grey; margin-left: 16px; font-size: 15px; font-weight: bolder;">
                            TRAILER</span>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>
<div class="input-group">
    <input id="lenght" type="text" class="form-control" name="email" placeholder="select truck length" />
    <span class="input-group-addon" style="position: relative; width: 14%;"><a href="#"
        class="showhide"><i class="glyphicon glyphicon-chevron-left"></i></a></span>
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

pandeyis...

0 3

Reply
ANSWER
User: pandeyism
Replied: on Dec 18, 2018 05:24 AM
Modified: on Dec 18, 2018 05:51 AM
Report

Hey v@run,

Please refer below sample.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
    $(document).ready(function () {
        $(".col-md-12").click(function () {
            $(".open").show();
            $(".CONTAINER").show();
            $(".TRAILER").show();
            $(".input-group-addon").show();
        });
    });
</script>
<div>
    <div class="box ">
        <p class="title">
            Truck type</p>
        <div class="col-md-12">
            <a class="showSingle" target="1">
                <div class="s">
                    <div class="vehicle-item padding-adjust" style="height: 0px; margin-left: 249px;">
                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAABaCAMAAABOrg7KAAAAkFBMVEUAAADkOjrkOTvmOTvkOTvkPDznPT3jOTrlOTz/P0vkOTvkODvmOTz/YmLkODrlOTvkOTrkODrkOTvkODrkODvkOTvkOTzlOjzqPkDkOTvlODvkODrjOTvkOTvkOTrkOTrtP0HkODvoPT7jODrkOTvkODrlOjzlPD7mOj3kODvkODvoSEjjOTrmOTzkODvjODq4CvWpAAAAL3RSTlMAYH1a/EApwWsIqfRRAul2zvfi2cSCbzoYi4Xs3aObaBG/IfC0lEstMnHTCspHX+ZSgLMAAALbSURBVGje7ZjrkqIwEEZbxUtEQEQFEcX7ZZzZvP/bbW1iETSM3UwNYG3l/DOGeAxfOgEwGAwGg8Fg0Ojyb3E3gFCDBD8CQh0S1gUQapDgU0CoQ4K3oHKUhNd5pi3al9VnU0n0QOOAZLMWiZ2PZLMOCZiJbz4d0KlPgk3EVyno1CcBp5qyqUvo2VxDjnYF/NEk9GzyEBS8AvovJUAWi7HTqARLZDYblFDZjBqUUNlsUkJls0kJlc1GJVggOgwalYAv0WEfNSoBQ9Fj1azEzpbZbFQCPNHlw2lOQmVzXrWE9RJ+z2aFEmRW7yDBu+8g8eG8gQS/SolV67f4zEu0VXt8CFzfd4NDnO8tl6kN9xr+inMar9fx4AwEhkVLlHkuz3A99lw3UYkonmSXL6IfSYwm/IHJKOs+oEiw2Oc5/AUrLzHjGrMyEr2xFuVzWYlVYXGgS5xdrrG8lJJQ82BPh8OpreaCKLHLHJJ+P8ksemUkRlwyHjFxe0djLhnRJJzpPY/XSCR0MLmPx+gSTF5jzSFjbsl0MpKExwXrW5bSo5pKooQnHU6Q4yQtPIrEbSl/Uffab6gSjqu2a8VcTrCDSKiuQ3hgLSshVSKU9w+ekLkICRJTEemn8rTZi1GpEguVwTwyrQtcYmMVvlySw0ZEia34I1qQmVipWyWB7fVPhLwEvUC9ttRnOaBKaBFkpSRsFSt9vmyihAUadu0S/KZVMOtXb0fq/wOROGulnNMgBTOj8w0DVdbyyOZrh8QGWaI4iZgyp6jOTIAIUqxwjkUVpKVesVBAyjZOT0TQf/C92CopFJANjMBK7lZfqqUr97QDUEG2cgLRUg6wju6fj5bU2gEV9FBDH8Dqx2k621pc0gEyyPGOxJwX4AEd5KBLI7W0Qn6FEiBHfiKXgD+QhFAG5OGHCkuT3NVzBqVAHgPpON24n9h2Mo27DvwUJ1xsA9sOtovQAYPBYDAYDP8XfwF2AWw7LszxyAAAAABJRU5ErkJggg==">
                        <span class="open" style="color: grey; margin-left: 16px; font-size: 15px; font-weight: bolder;
                            display: none;">OPEN</span>
                    </div>
                </div>
            </a><a class="showSingle" target="2">
                <div class="">
                    <div class="vehicle-item" style="height: 2px; margin-left: 466px;">
                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAABaCAMAAABOrg7KAAAAdVBMVEUAAACWlpaYmJibm5uXl5eXl5eXl5eYmJjKysqWlpaYmJiWlpakpKSXl5eXl5eXl5eWlpaXl5eWlpaYmJiXl5eZmZmcnJyXl5eXl5ednZ2WlpaXl5eXl5eWlpaYmJiYmJiYmJiXl5eXl5eXl5eXl5ebm5uWlpbWPIr+AAAAJnRSTlMAz1IgwadAKgJrJfMI94Li2+iKbzszDr9iFcOc1bh0SpK0yHZaI9r4kSUAAALYSURBVGje7ZjbdqowEEDHWEooAVEugnjtJf//iWd1wqUSaQZPNTxkPzLRtZPMkAngcDjGkA/gxUk4CSfhJJyEk3ASTuK/JcTbKNXTJF7Hg2E1AwnpzUFCZnOQWPAZSMjgmRIpG3JscvOJEj5oXDBQ25X4ijCSW5WAGCPv3KpEscJQaVUCPjG0LqxKwBZjZ7sSvlRBqxJwxuDWrkSxxiizKgElRlfCqgR/x3BsVQJyDEdfViWgxvjFrkQV4oCTVQlIcUAirErwPY74sCrRjAiXViXAU623XYmlys3XR0tcvN9QjcWeP1CCTDoHibCagYSs5yAhcyWxWvwV4U+JvWl0olpvJRHA7xRvbwWQ8G6XKM822yQMk+0m49AjVIWYJar0gtOLDml1p4Q4rmXH+iig40iSqM6R7Ijq5T0SbCWvWDFoCSgSLBzU0+dkCR5LjZhPkNhIjfNECe7JG3icKIEOBguzRNzt5c7zdlG3FlSJst0DL2As8NqdCaZIMKlYMIEpyhZSwWgSX6GawaYApIgj9cCnS4gmJ1MODTxtslOQJDxVURl05KrSDnSJo0RO8IOTRI4UCV9NO796phYnp0pwZZ3e6i/XnCBxbiN6mtRUiezm1zqu8iIjSCRty6H/fkWV2PQ52NNm62YgUTONsu+G9aUM2BjvqM5iJbHFHRUwQGCGbwcSo/haycgJ+LiaO9DY4aWDKqGdnVxOQOWxN7JpIVUCNMKnS+grIf52O06HbwwSmX6pJ9InZjiemC3LEfKmjAbEym1JghtK1MxC/9zY9mN7IGJ4WZmJe139IRHDa9tMFam11M+eaAlUPgwHmJGz1j6UyqsGKoajnEDR/MEhByS/SGRdARVDU0Ogv0YldRzXiWw4ARlDe0fiU96gBDqGRpdoEckB0SQHQ8tPxF/IK/Y5TMFw+aHCy73sSEoB9yA+tGvgRHgWv3zfZXfxK4c70C/EDoeDzD/xr3T9JKxK4gAAAABJRU5ErkJggg==">
                        <span class="CONTAINER" style="color: grey; margin-left: 16px; font-size: 15px; font-weight: bolder;
                            display: none;">CONTAINER</span>
                    </div>
                </div>
            </a><a class="showSingle" target="3">
                <div class="">
                    <div class="vehicle-item">
                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIEAAABaCAMAAACoh8WOAAAAdVBMVEUAAACXl5eWlpaXl5eYmJiXl5eXl5empqaXl5eWlpaWlpaXl5eXl5eXl5empqaXl5eXl5eWlpaXl5eXl5eXl5ednZ2YmJiYmJiYmJiampqXl5eYmJibm5uXl5eWlpaXl5eampqXl5eXl5eWlpaYmJiZmZmWlpZzCbpbAAAAJnRSTlMAWvuwTWFSBvbz2OrhzwqlgsSKv6kPdG87IOaQGcu4mipqfXVGM/ycqm8AAAK4SURBVGje7ZjrkqIwEEZbVO6CoiAIeJ9+/0fcolOaguCmsca4VZvzk5pYJ53ORzNgsVgsFovlP2GOL1jCOOYMDgmMYs4A1zCKQYOggTEMGuAJjEAG9WzAkRTOYAIyWMCAyu8eH8EEqgGRYccdRjBkkEfd8xWMYMgALi9jyZSBFxqJJWmgsjATS9JAZfsilswZ/JiJJWmgkhqIJcXAaCypBqZjSTUwHUuqgelYUg2YsWTUAFzsuIKCAQMDsaQaMGPJoIGMJYdiCX8VnoGMpU8boPMaJO6fNGCx+roBLr9ucEi+afDZWCKDevlkfQwPvn8Ij2v5rKVYAibeoqjTbP/zVh54twifRIXXiyVgcU6Dx7ld88kGbow9YhcEbIOkdlASzSYarFFhPc2gWWGfkzfFIMUR0ikGVayu5xvICvib3W7jyyqwDbwWBUG7DR0UZGwD9xF+bkIH6j4K6rINaiQ29670+eWARMk08EQBnT082YttxB7T4Ex/71yeXbmjZSHT4CYEei/JhVAoGAayj2bKkwXPQOTAHnrsxZ3iGeTkW/fuJo2ZW5ZBiaNz+UqcJMtgRj2Yq2Omk3MMMtF044NqxjJIZQkkMf06x0AMpEp8eAGVkWXQjn1fnZDJIqRrBAob6maWAW23gT4XtgHtdQcKO6oNy4AacVjFmUkDuk3Dplv+1in4HRoD+onhULBGBrIT/QQGJL7oRA70b9jb2A7qmZ5Gcxs5FCOJcqb1FTDQJBKHswhltY1C4KBJZRakG1XKTbgBi+JvbyY98sjCSgr4Mqi1aN7OPFpRsotY0JxwygY0EwqPKkAiOhXL69xBYgM8NFMaexcKcQM8NJMqW8EfClTARDOtsynj3vJ5Dlw0Xyx8vGuAD8Lpy9WvtjdI3LSNnLjNSniPMtuGQRBusxIsFovFYrH84/wBMzYtWDj6mkEAAAAASUVORK5CYII=">
                        <span class="TRAILER" style="color: grey; margin-left: 16px; font-size: 15px; font-weight: bolder;
                            display: none;">TRAILER</span>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>
<div class="input-group">
    <input id="lenght" type="text" class="form-control" name="email" placeholder="select truck length" />
    <span class="input-group-addon" style="position: relative; width: 14%; display: none">
        <a href="#" class="showhide"><i class="glyphicon glyphicon-chevron-left"></i></a>
    </span>
</div>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Disable HTML Anchor Link on PageLoad using jQuery

Company

Explore

Follow us

Contact Us