Disable select boxes if text field has a value

Question

I am trying to disable 2 select boxes if an input text field has a value. If the value of the input text field is cleared, the select boxes should be enabled again. It seems to work well the first time or if I never touch either one of the select boxes but it seems if I even active them, they will not disable again. For example, if I enter text into the input box the 2 select boxes are disabled and if I clear it they are enabled again, but then when I type in the text box to disable them again it does not work if I have activated either of the select boxes. HTML

<p><b>Area Search:</b> Choose one </p>
<div class="form-group row">
  <div class="form-group col-md-4">
    <input type="text" class="form-control" id="zipcode" placeholder="Zip Code">
  </div>
</div>
<div class="form-group row">
  <div class="form-group col-md-4">
    <select class="selectpicker" title="Borough" multiple data-live-search="true" multiple data-max-options="1"
      id="boroughselect">
      <option value="BX">Bronx</option>
      <option value="BK">Brookyln</option>
      <option value="MN">Manhattan</option>
      <option value="SI">Staten Island</option>
      <option value="QN">Queens</option>
    </select>
  </div>
</div>
<div class="form-group row">
  <div class="form-group col-md-4">
    <select class="selectpicker" title="Neighborhood" multiple data-live-search="true" multiple data-max-options="1"
      id="neighborhoodselect">
    </select>
  </div>
</div>

JS

$("#zipcode").keyup(function() {
    var zipcode = $("#zipcode").val();
    if (zipcode != "") {
        console.log('disabled');
        document.getElementById("boroughselect").disabled = true;
        document.getElementById("neighborhoodselect").disabled = true;
    } else if (zipcode == "") {    
        console.log('enabled');
       document.getElementById("boroughselect").disabled = false;
       document.getElementById("neighborhoodselect").disabled = false;  
    }
});

are u tried just with if/else structure?, i mean without if/else if — Christian Carrillo
your code seems to be working fine (at least on Chrome Version 76.0.3809.100): jsfiddle.net/3ydta1wf — Hugo Silva
Can you give us the HTML DOM structure and full code block? are you removing any elements? — Kannan G

Mister Jojo Mister Jojo · Accepted Answer · 2019-08-28T02:29:41

I do not know what you did with your real code, but it works perfectly in JS

const sel_1   = document.querySelector('#boroughselect' )
    ,  sel_2   = document.querySelector('#neighborhoodselect' )
    ,  zipcode = document.querySelector('#zipcode' )


zipcode.oninput=_=>
{
  sel_1.disabled = sel_2.disabled = (zipcode.value!=='')
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<p><b>Area Search:</b> Choose one </p>
<div class="form-group row">
  <div class="form-group col-md-4">
    <input type="text" class="form-control" id="zipcode" placeholder="Zip Code">
  </div>
</div>
<div class="form-group row">
  <div class="form-group col-md-4">
    <select class="selectpicker" title="Borough"  data-live-search="true" id="boroughselect">
      <option value="BX">Bronx</option>
      <option value="BK">Brookyln</option>
      <option value="MN">Manhattan</option>
      <option value="SI">Staten Island</option>
      <option value="QN">Queens</option>
    </select>
  </div>
</div>
<div class="form-group row">
  <div class="form-group col-md-4">
    <select class="selectpicker" title="Neighborhood"  data-live-search="true" id="neighborhoodselect">
      <option value="BX">Bronx</option>
      <option value="BK">Brookyln</option>
      <option value="MN">Manhattan</option>
      <option value="SI">Staten Island</option>
      <option value="QN">Queens</option>
    </select>
  </div>
</div>

Disable select boxes if text field has a value

2 Answers