How to enable/disable bootstrap option in select dropdown using javascript/jquery

Question

im trying to disable specific option.here is my code

<select id="reportselect" name="r_name"  class="selectpicker mdb-select md-form colorful-select dropdown-secondary" required >
   <option value="" disabled selected>Choose report</option>
   <option value="1">Report 1</option>
   <option value="2">Report 2</option>
   <option value="3">Report 3</option>
   <option value="4">Other Reports</option>
   <option value="5">Final Report</option>
</select>

i cant find any error.

<script type="text/javascript">
if(reportshowjs=='1'){  
  alert('11111e11111');

  var selectobject;
  selectobject = document.getElementById("reportselect").getElementsByTagName("option");
  selectobject[3].disabled = true;
  $('#reportselect').selectpicker('refresh');
}
</script>

Answer 1

Here is a Javascript example:

document.getElementById("reportselect").options[3].disabled = true;

Please verify this works for you.

---

The code I posted should work.

Frankly, your original code should also work.

I assume what's "not working" is the option remains "enabled".

Your best recourse is to step through the debugger, perhaps breaking your expression into individual pieces to see which (if any) is causing you grief.

EXAMPLE:

var idx = 3; 
var s = document.getElementById("reportselect");
var o = s.options[idx];
o.disabled = true;
...  
<= Single step through each of these in Chrome Developer Tools,
   ensuring none are ever "null"...