Enable Disable TextBox on DIV click using jQuery

v@run

SOLVED CLOSED ACTIVE ANSWERED
User: v@run
Posted: on Dec 21, 2018 10:03 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 2437
Sample Code: Download

hello sir..

i want to disable textbox and after clicking the div content want to enable it

im having two textbox and on clicking any of the 3 div content i want to enable textbox1 (length) and on clicking the textbox1 i want to enable the second textbox(weight)

    <div class="box" style="border: 2px solid darkgrey;width: 64%;height: 91px;">
        <div class="row">

            <div class="col-md-2" style="margin-left: 21px;">
                <a class="showSingle">
                    <div class="vehicle-itemopen">
                        <img src="data:image/png;base64,iVB" style="width: 8%;"><br><span style="color: grey;  font-size: 12px; font-weight: bolder;">OPEN</span>
                    </div>
                </a>
            </div>  
             <div class="vl"></div>

            <div class="col-md-2" style="margin-left: 164px;margin-top: -78px;">
                <a class="showSingle">
                    <div class="vehicle-itemcontainer ">
                        <img src="data:image/png;base64,iVBO" style="width: 9%;"><span style="color: grey;font-size: 12px; font-weight: bolder;">CONTAINER</span>
                    </div>
                </a>
            </div>
            <div class="v2"></div>

            <div class="col-md-2" style="margin-left: 356px;">
                <a class="showSingle">
                    <div class="vehicle-itemtrailer">
                        <img src="data:image/png;base64,iVBO" style="width: 13%;margin-top: -69px;"><span style="color: grey; font-size: 12px; font-weight: bolder;">TRAILER</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="form-group" style="margin-top: 30px;" id="ddls">
        <div class="row">
            <div class="col-md-3">
                <div class="input-group ">
                    <input id="lenght" type="text" class="form-control" name="length" placeholder="select truck length" style="margin-left: 10px; width: 219px;" autocomplete="off" />
                    <span class="input-group-addon" style="position: relative; width: 18%;">
                        <a href="#" data-toggle="popover" title="Popover Header" data-content=".list"><a href="#" class=""><i class="glyphicon glyphicon-chevron-left" id="lengthicon"></i></a></span>
                </div>
            </div>

            <div class="col-md-3">
                <div class="input-group">
                    <input id="weight" type="text" class="form-control" name="weight" placeholder="select weight" style="margin-left: 258px; width: 219px;" autocomplete="off" />
                    <span class="input-group-addon" style="position: relative; width: 18%;">
                        <a href="#" data-toggle="popover" title="Popover Header" data-content=".list"><a href="#" class=""><i class="glyphicon glyphicon-chevron-left" id="weighticon"></i></a></span>
                </div>
            </div>
        </div>
    </div>

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

pandeyis...

0 8

Reply
ANSWER
User: pandeyism
Replied: on Dec 23, 2018 11:03 PM
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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
    $(function () {
        $(".box").click(function () {
            $("#lenght").prop('disabled', false);
        });
        $("#lenght").click(function () {
            $("#weight").prop('disabled', false);
        });
    });
</script>
<div class="box" style="border: 2px solid darkgrey; width: 64%; height: 91px;">
    <div class="row">
        <div class="col-md-2" style="margin-left: 21px;">
            <a class="showSingle">
                <div class="vehicle-itemopen">
                    <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=="
                        style="width: 8%;"><br>
                    <span style="color: grey; font-size: 12px; font-weight: bolder;">OPEN</span>
                </div>
            </a>
        </div>
        <div class="vl">
        </div>
        <div class="col-md-2" style="margin-left: 164px; margin-top: -78px;">
            <a class="showSingle">
                <div class="vehicle-itemcontainer ">
                    <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=="
                        style="width: 9%;"><span style="color: grey; font-size: 12px; font-weight: bolder;">CONTAINER</span>
                </div>
            </a>
        </div>
        <div class="v2">
        </div>
        <div class="col-md-2" style="margin-left: 356px;">
            <a class="showSingle">
                <div class="vehicle-itemtrailer">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIEAAABaCAMAAACoh8WOAAAAdVBMVEUAAACXl5eWlpaXl5eYmJiXl5eXl5empqaXl5eWlpaWlpaXl5eXl5eXl5empqaXl5eXl5eWlpaXl5eXl5eXl5ednZ2YmJiYmJiYmJiampqXl5eYmJibm5uXl5eWlpaXl5eampqXl5eXl5eWlpaYmJiZmZmWlpZzCbpbAAAAJnRSTlMAWvuwTWFSBvbz2OrhzwqlgsSKv6kPdG87IOaQGcu4mipqfXVGM/ycqm8AAAK4SURBVGje7ZjrkqIwEEZbVO6CoiAIeJ9+/0fcolOaguCmsca4VZvzk5pYJ53ORzNgsVgsFovlP2GOL1jCOOYMDgmMYs4A1zCKQYOggTEMGuAJjEAG9WzAkRTOYAIyWMCAyu8eH8EEqgGRYccdRjBkkEfd8xWMYMgALi9jyZSBFxqJJWmgsjATS9JAZfsilswZ/JiJJWmgkhqIJcXAaCypBqZjSTUwHUuqgelYUg2YsWTUAFzsuIKCAQMDsaQaMGPJoIGMJYdiCX8VnoGMpU8boPMaJO6fNGCx+roBLr9ucEi+afDZWCKDevlkfQwPvn8Ij2v5rKVYAibeoqjTbP/zVh54twifRIXXiyVgcU6Dx7ld88kGbow9YhcEbIOkdlASzSYarFFhPc2gWWGfkzfFIMUR0ikGVayu5xvICvib3W7jyyqwDbwWBUG7DR0UZGwD9xF+bkIH6j4K6rINaiQ29670+eWARMk08EQBnT082YttxB7T4Ex/71yeXbmjZSHT4CYEei/JhVAoGAayj2bKkwXPQOTAHnrsxZ3iGeTkW/fuJo2ZW5ZBiaNz+UqcJMtgRj2Yq2Omk3MMMtF044NqxjJIZQkkMf06x0AMpEp8eAGVkWXQjn1fnZDJIqRrBAob6maWAW23gT4XtgHtdQcKO6oNy4AacVjFmUkDuk3Dplv+1in4HRoD+onhULBGBrIT/QQGJL7oRA70b9jb2A7qmZ5Gcxs5FCOJcqb1FTDQJBKHswhltY1C4KBJZRakG1XKTbgBi+JvbyY98sjCSgr4Mqi1aN7OPFpRsotY0JxwygY0EwqPKkAiOhXL69xBYgM8NFMaexcKcQM8NJMqW8EfClTARDOtsynj3vJ5Dlw0Xyx8vGuAD8Lpy9WvtjdI3LSNnLjNSniPMtuGQRBusxIsFovFYrH84/wBMzYtWDj6mkEAAAAASUVORK5CYII="
                        style="width: 13%; margin-top: -69px;"><span style="color: grey; font-size: 12px;
                            font-weight: bolder;">TRAILER</span>
                </div>
            </a>
        </div>
    </div>
</div>
<div class="form-group" style="margin-top: 30px;" id="ddls">
    <div class="row">
        <div class="col-md-3">
            <div class="input-group ">
                <input id="lenght" type="text" class="form-control" name="length" placeholder="select truck length"
                    style="margin-left: 10px; width: 219px;" autocomplete="off" disabled="disabled" />
                <span class="input-group-addon" style="position: relative; width: 18%;"><a href="#"
                    data-toggle="popover" title="Popover Header" data-content=".list"><a href="#" class="">
                        <i class="glyphicon glyphicon-chevron-left" id="lengthicon"></i></a></span>
            </div>
        </div>
        <div class="col-md-3">
            <div class="input-group">
                <input id="weight" type="text" class="form-control" name="weight" placeholder="select weight"
                    style="margin-left: 258px; width: 219px;" autocomplete="off" disabled="disabled" />
                <span class="input-group-addon" style="position: relative; width: 18%;"><a href="#"
                    data-toggle="popover" title="Popover Header" data-content=".list"><a href="#" class="">
                        <i class="glyphicon glyphicon-chevron-left" id="weighticon"></i></a></span>
            </div>
        </div>
    </div>
</div>

Demo

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

Enable Disable TextBox on DIV click using jQuery

Company

Explore

Follow us

Contact Us