asp.net core jquery to re-enable ddl ignore ddl source

Question

I want to give user option to either select a value from ddl or to enter one in the textbox. However, since both are sources for binded table field, both shouldn't be active simultaneous so I use a jquery to disable the texbox if a value is selected in ddl or to re-enable if none. But when I try to do the same for the ddl, re-enable it lose the source for the ddl. How it should be done?

 

<div class="row no-gutters" onchange="funcLocation()">
    <div class="col-md-2">
         <label class="form-control text-white" style="background-color:mediumorchid;">Location </label>
    </div>
    @if (Model.RALocation == true)
    {
        <div class="col-md-3">
           <select id="LocS" class="form-control border-danger" asp-items="@Model.SelectLocation" asp-for="RiskAssessmentMain.Location">
           <option value="">--Select Location--</option>
           </select>
                </div>
                <span class="text-danger ml-2 mr-2">OR</span>
            }
        <div class="col-md-3">
            <input id="LocT" class="form-control" asp-for="RiskAssessmentMain.Location" placeholder="Enter New Location" />
        </div>
    </div>

jquery

 

function funcLocation() {
            var data1 = $("#LocS :selected").text();
            var data2 = $("#LocT").val();
            if (data2.length > 0) {
                $("#LocS").empty();
                $("#LocS").attr("disabled", true);
            }
            else {
                $("#LocS").attr("disabled", false);
                $("#LocS").append("<option value=''>--Select Location--</option>");
            }
            if (data1 != "--Select Location--") {
                $("#LocT").empty();
                $("#LocT").attr("disabled", true);
            }
            else {
                $("#LocT").attr("disabled", false);
            }
        }