I ran into a problem. How can I enable disabled inputs if I have selected multiple items in select tag and disable it again when I removed the selection?
<div class="form-group mb-3">
<select class="selectpicker show-tick decore" name="state" id="state" multiple>
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fas fa-child"></i>
</span>
</div>
<input type="text" name="first" id="first" class="form-control" placeholder="first" aria-label="first" aria-describedby="basic-addon1" disabled />
</div>
<input type="text" name="second" id="second" class="form-control" placeholder="second" aria-label="second" aria-describedby="basic-addon1" disabled />
</div>
Use change
event handler for select
tag and in function, check if length of selected
option is less than 2
remove disabled
attribute and if is great than 2
add it to element.
document.getElementById("state").onchange = function(){
var length = this.querySelectorAll("option:checked").length;
document.querySelectorAll("#first, #second").forEach(function(ele){
ele.disabled = length < 2;
})
}
document.getElementById("state").onchange = function(){ var length = this.querySelectorAll("option:checked").length; document.querySelectorAll("#first, #second").forEach(function(ele){ ele.disabled = length < 2; }) }
<div class="form-group mb-3"> <select class="selectpicker show-tick decore" name="state" id="state" multiple> <option value="one">one</option> <option value="two">two</option> </select> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <i class="fas fa-child"></i> </span> </div> <input type="text" name="first" id="first" class="form-control" placeholder="first" aria-label="first" aria-describedby="basic-addon1" disabled /> <input type="text" name="second" id="second" class="form-control" placeholder="second" aria-label="second" aria-describedby="basic-addon1" disabled /> </div>
Also you can do this work using jQuery with less code
$("#state").change(function(){
$("#first, #second").prop("disabled", $(":selected",this).length < 2);
});
$("#state").change(function(){ $("#first, #second").prop("disabled", $(":selected",this).length < 2); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group mb-3"> <select class="selectpicker show-tick decore" name="state" id="state" multiple> <option value="one">one</option> <option value="two">two</option> </select> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <i class="fas fa-child"></i> </span> </div> <input type="text" name="first" id="first" class="form-control" placeholder="first" aria-label="first" aria-describedby="basic-addon1" disabled /> <input type="text" name="second" id="second" class="form-control" placeholder="second" aria-label="second" aria-describedby="basic-addon1" disabled /> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.