Hi i needed help with my button to be disabled that if the option selected = No it be disabled
if Yes it be enabled
I am using my ajax to call for the option
This is my html code for the option and button
<label for="select-Require-CDS" class="col-form-label">Require CDS</label>
<br/>
<select class="select-Require-CDS custom-select-sm col-6" id="select-Require-CDS" required>
<option selected disabled value="">Select ....</option>
</select>
<div class="invalid-feedback">
Please select a valid option .
</div>
<button id="select-Yes-No" style="margin-left: 10px; ">Select</button>
This is my ajax code
$.ajax({
// The url that you're going to post
/*
This is the url that you're going to put to call the
backend api,
in this case, it's
https://ecoexchange.dscloud.me:8080/api/get (production env)
*/
url:"https://ecoexchange.dscloud.me:8090/api/get",
// The HTTP method that you're planning to use
// i.e. GET, POST, PUT, DELETE
// In this case it's a get method, so we'll use GET
method:"GET",
// In this case, we are going to use headers as
headers:{
// The query you're planning to call
// i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
query:"RequireGet()",
// Gets the apikey from the sessionStorage
apikey:sessionStorage.getItem("apikey")
},
success:function(data,textStatus,xhr) {
console.log(data);
for (let option of data) {
$('#select-Require-CDS').append($('<option>', {
value: option.RequireOption,
text: option.RequireOption
}));
}
},
error:function(xhr,textStatus,err) {
console.log(err);
}
});
and this is how my json response is
[
{
"RequireOption": "No"
},
{
"RequireOption": "Yes"
}
]
So my website display it be like this

Now how can i say that i select option as No the button is disabled but if yes is enabled ??
How that if no it be disabled as well ?
>Solution :
$('#select-Require-CDS').on('change', function(){
if($(this).val()=='Yes'){
$('#select-Yes-No').attr('disabled',false) //button is now enabled
}else{
$('#select-Yes-No').attr('disabled',true) //button is now disabled
}
});
This is an handler listening for change on the select. Based on what is selected then it adapt the button availability. It is untested but should do the trick.
I have used .on because you are adding the attributes later with ajax (later = after dom ready) so .change will not work on these options
