Dropdown not disable when radio button is clicked
Question
It's supposed to be working but unfortunately it isn't. I don't know what is wrong with my code. When I try in jsfiddle , it's working but in my Notepad++ it doesn't works. I can't figure out what's wrong with this.
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$('input:radio[name="senior"]').change(function() {
if ($(this).val()=='Yes') {
$('#seniordis').attr('disabled',false);
} else
$('#seniordis').removeAttr('disabled', true);
});
</script>
</head>
Senior :
<input name="senior" type="radio" id="Yes" value="Yes" />Yes
<input name="senior" type="radio" id="No" value="No" selected="selected" />No<br />
<select name="seniordis" id="select">
<option value="100" >100% discount</option>
<option value="50">50% discount</option>
<option value="10">10% discount</option>
</select>
</td>
4 answers
solution1
0 2016-04-16 05:51:55
The issue is not with the code. The issue is with the way you are referencing the libraries . Change the references to have a https://
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
It is not working in your Notepad++ because you are viewing this file in the brwoser which will have the file:// request and not https:// . It works in your fiddle because there you might be referencing the library in different way but Valid way .
Also pointing out a mistake in your code.
This line $('#seniordis').removeAttr('disabled', true);
Here seniordis in the value of name attribute of your select tag and not the id if it... so use Either $('[name="seniordis"]') to target the element by name or $('#select') to target the element by id.
So the code should be
$('#select').attr('disabled', true);
OR this
$('#select').removeAttr('disabled');
solution2
0 ACCPTED 2016-04-16 06:00:09
Your problem is,
senoirdisis name not a id. Your id isselect.
$().ready(function()
{
$('input:radio[name="senior"]').change(function() {
if ($(this).val()=='Yes') {
$('#select').prop('disabled',false);
}
else
{
$('#select').prop('disabled',true);
}
});
});
solution3
0 2016-04-16 06:40:15
There are some Errors with your code
This line
input:radio[name="senior"]Must be this
input[name=senior]:radioThis Line
$('#seniordis').attr('disabled',false);Must be
$('#select:input').removeAttr('disabled');
Use code Below:
<div>
<input name="senior" type="radio" id="Yes" value="Yes" />Yes
<input name="senior" type="radio" id="No" value="No" />No<br />
<select name="seniordis" id="select">
<option value="100">100% discount</option>
<option value="50">50% discount</option>
<option value="10">10% discount</option>
</select>
</div>
<script type="text/javascript">
$("input[name=senior]:radio").change(function () {
if ($(this).val() == "Yes") {
$('#select:input').removeAttr('disabled');
}
else {
$('#select:input').attr('disabled', 'disabled');
}
});
</script>
solution4
-1 2016-04-16 05:53:03
$('input:radio[name="senior"]').change(function() {
if ($(this).val() == 'Yes') {
$('select[name="seniordis"]').attr('disabled',false);
} else {
$('select[name="seniordis"]').attr('disabled', true);
}
});
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.