Click here to Skip to main content
15,845,115 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I have two selected list
Branch and Warehouse
if I choose value of one of them the other should be disabled
for example if I choose a value from Branch then Warehouse should be disabled and opposite is right.

What I have tried:

Razor
<div class="form-group">  
        <label asp-for="Input.Branch"></label>  
        <select asp-for="Input.Branch" id="branch" class="form-control">  
            <option value="">--Select Branch--</option>  
            @foreach (var item in Model.BranchesList)  
            {  
                <option value="@item.BranchId.ToString()">@item.BranchName</option>  
            }  
        </select>  

        <span asp-validation-for="Input.Branch" class="text-danger"></span>  
    </div>  

    <div class="form-group">  
        <label asp-for="Input.Warehouse"></label>  
        <select asp-for="Input.Warehouse" id="warehouse" class="form-control">  
            <option value="">--Select Branch--</option>  
            @foreach (var item in Model.WarehousesList)  
            {  
                <option value="@item.WareHouseId.ToString()">@item.Name</option>  
            }  
        </select>  
        <span asp-validation-for="Input.Warehouse" class="text-danger"></span>  
    </div>  
    <button type="submit" class="btn btn-primary">Register</button>  
</form>  
JavaScript :
JavaScript
 $(document).ready(function () {  
    $("#branch").change(function () {  

        if ($(this).val() == "branch") {  

            $("#warehouse").attr('disabled', 'disabled');  
        }  
        else {  
            $("#warehouse").removeAttr('disabled');  
        }  
    });  
});
Posted
Updated 10-Mar-21 4:34am
v2

1 solution

Try something like this:
JavaScript
$(function(){
    const branchChanged = function(){
        let branch = $("#branch").val();
        $("#warehouse").prop("disabled", branch !== "");
    };
    
    const warehouseChanged = function(){
        let warehouse = $("#warehouse").val();
        $("#branch").prop("disabled", warehouse !== "");
    });
    
    // Update the lists when a value is selected:
    $("#branch").change(branchChanged);
    $("#warehouse").change(warehouseChanged);
    
    // Handle the initial value, if any:
    branchChanged();
    warehouseChanged();
});


NB: Pay attention to the documentation:

jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:
  • $( handler )
  • $( document ).ready( handler )
  • $( "document" ).ready( handler )
  • $( "img" ).ready( handler )
  • $().ready( handler )

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated.
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900