jQuery onchange event won't prop disabled attribute of HTML to false
I tried to remove the disable attribute form an HTML document using prop but it is not working for some reason. Here is my HTML
<form>
<div class="form-group">
<label class="form-label">Select Type</label>
<div class="form-field">
<input type="radio" name="estimate-type" id="estimate-type" value="publication">Publication
<input type="radio" name="estimate-type" id="estimate-type" value="package">Package
</div>
</div>
<div class="form-group hidden">
<label class="form-label">Select Editions</label>
<div class="form-field">
<input type="radio" name="publication-type" id="publication-type" value="all" checked>All Editions
<input type="radio" name="publication-type" id="publication-type" value="manual">Select Editions
</div>
</div>
<div class="form-group hidden" id="editions">
<label class="form-label"></label>
<div class="form-field">
<input type="checkbox" name="edition-mumbai" id="edition-mumbai" value="mumbai" checked disabled>Mumbai
<input type="checkbox" name="edition-delhi" id="edition-mumbai" value="delhi" checked disabled>Delhi
<input type="checkbox" name="edition-chennai" id="edition-chennai" value="chennai" checked disabled>Chennai
<input type="checkbox" name="edition-calcutta" id="edition-calcutta" value="calcutta" checked disabled>Calcutta
</div>
</div>
<div class="form-group">
<label class="form-label"></label>
<div class="form-field">
<button type="button" name="select-estimate-type" id="select-estimate-type">Proceed</button>
</div>
</div>
<div id="publication-estimate">
<div class="form-group">
<label class="form-label">Select Type</label>
<div class="form-field">
Publication
</div>
</div>
</div>
<div id="package-estimate">
Package
</div>
</form>
The only CSS I used for now is changing the display of hidden class to none using display:none;
The jQuery code is
$(document).ready(function(){
$("#estimate-type").on('change', function(){
if ($(".form-field").find('input[value=publication]').prop('checked')){
$(".hidden").show();
}
else{
$(".hidden").hide();
}
});
$("#select-estimate-type").on('click', function(){
if ($(".form-field").find('input[value=publication]').prop('checked')){
$("#publication-estimate").show();
$("#package-estimate").hide();
}
else{
$(".hidden").hide();
$("#package-estimate").show();
$("#publication-estimate").hide();
}
});
$("#publication-type").on('change', function(){
if ($(".form-field").find('input[value=manual]').prop('checked')){
$(".form-field input").prop('disabled', false);
}
else{
}
});
});
The problem I am facing is when I change click on radio button "Select Editions", the jQuery code is not removing the 'disabled' attribute. I read an article that said prefer prop() over removeAttr() Please help.
.form-field s are <div> s and don't have disabled properties. You need to select the <input> s instead; for example,
$(".form-field input").prop('disabled', false);