Enable form elements after selecting searchable dropdown item

Question

0.00/5 (No votes)

See more:

I am trying to enable form elements when selecting the first drop down with id LId3, I took the code from a button. The problem starts when I enable the searchable dropdown, when i open the searchable dropdown the form elements are not enabled. When the dropdown is clickable the form elements get enabled. Please assist with the below:
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<form asp-controller="Leaves" asp-action="Create" method="post" class="form-horizontal" role="form">
<div asp-validation-summary="ModelOnly"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div class="form-group" style="display: flex">

<script type="text/javascript">$(document).ready(function () {
$("#GFG :input").prop("disabled", true);
});

function enable_disable() {
$("#GFG :input").prop("disabled", false);
}</script>

<input class="form-control col-sm-2" data-toggle="tooltip" data-placement="left" title="Employee Identiy Number" readonly />

<div class="col-sm-3">
<select onclick="enable_disable()"
class="form-control" value="Enable"
id="LId3">
</select>
</div>
</div>

</form>
<form asp-controller="Leaves" asp-action="Create" method="post" class="form-horizontal" role="form" id="GFG">
<div asp-validation-summary="ModelOnly"></div>
<div class="form-group" style="display: flex">

<input class="form-control col-sm-2" value="Name" data-toggle="tooltip" data-placement="left" title="Name of employee" readonly />

<div class="col-sm-3">
<select asp-for="LId" id="LId1"
class="form-control"
asp-items="@(new SelectList(ViewBag.ListOfTable,"LId", "EmpName"))">
</select>
</div>
</div>


<div class="form-group" style="display: flex">

<input class="form-control col-sm-2" disabled value="Surname" data-toggle="tooltip" data-placement="left" title="Surname of employee" readonly />

<div class="col-sm-3">

<select asp-for="LId" id="LId2"
class="form-control"
asp-items="@(new SelectList(@ViewBag.ListOfTable,"LId", "EmpSurname"))">
</select>
</div>
</div>

<div class="form-group" style="display: flex">

<input class="form-control col-sm-2" value="Type of Leave" readonly />

<div class="col-sm-3">
<select asp-for="TypeOfLeave" name="offer" id="leave" class="form-control">
<option value="0">Select</option>
<option value="Sick">Sick</option>
<option value="Family Responsibility">Family Responsibility</option>
<option value="Study">Study</option>
<option value="Vacation">Vacation</option>
<option value="Bereavement">Bereavement</option>
<option value="TimeOffWithoutPay">Time Off Without Pay</option>
<option value="Military">Military</option>
<option value="JuryDuty">Jury Duty</option>
<option value="Maternity/Paternity">Maternity/Paternity</option>
<option value="Other">Other</option>

</select>
<span asp-validation-for="TypeOfLeave" class="text-danger"></span>
</div>
</div> 
 </form>

What I have tried:

I have only tried removing the searchable dropdown and using the normal dropdown.

Posted 16-Jan-20 11:24am

Member 10928805

Updated 17-Jan-20 10:21am

Add a Solution

Comments

tninis 17-Jan-20 3:44am

you want the elements to be enabled when you select an option from dropdown with LId3?

Member 10928805 17-Jan-20 3:46am

yes

tninis 17-Jan-20 4:30am

try this and remove the onclick="enable_disable()" from dropdown list
$('#LId3').change(function() {
$("#GFG :input").prop("disabled", false);
});

Member 10928805 17-Jan-20 4:37am

still it is not working when selecting the searchable drop down

tninis 17-Jan-20 5:02am

just tested on codepen, and when i am selection an option the inputes get enabled, show me what you did.

Member 10928805 17-Jan-20 5:06am

This is what i did, are you sure it is a searchable drop down?

$(document).ready(function () {
$("#GFG :input").prop("disabled", true);
});

$('#LId3').change(function () {
$("#GFG :input").prop("disabled", false);
}

tninis 17-Jan-20 5:07am

what do you mean by searchable dropdown ?

Member 10928805 17-Jan-20 5:10am

It is a dropdown that you could search items from. Mine is supposed to pull data from the database.

Member 10928805 17-Jan-20 5:08am

I wish i could show you an image

tninis 17-Jan-20 5:09am

you mean like select2 control ?
upload the image somewhere and send the link

Member 10928805 17-Jan-20 5:11am

yes the select2, still new in this so I don't have an account of uploading stuff and all.

tninis 17-Jan-20 5:26am

just tested with select2 and the code i send you is enabling the inputs, check the console if there is an error

Member 10928805 17-Jan-20 5:30am

Okay thanks, can i see how you called your select2.

tninis 17-Jan-20 5:38am

$('#LId3').change(function() {
$("#GFG :input").prop("disabled", false);
});

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

NP64 · Answer 1 · 2020-01-17T10:22:00

I have bootstrap multiselect drop-down. I used following code to enable/disable element on page for specific drop-down value selection.

JavaScript

$("#drpList").change(function () {
            var selection = $('#drpList option:selected');
            var selected = [];
            $(selection).each(function(index, brand){
                selected.push([$(this).val()]);
                alert(selected);
                if (selected == 123) {
                    $("#txtComment").prop('disabled', true);
                }
                else {
                    $("#txtComment").prop('disabled', false);
                }
            });
        });