On change event you should check the value of the selected option. Also to remove the attribute you can use .removeAttr().
Try the following way:
$(document).ready(function(){
$('form input[name="spouseName"]').prop("disabled", true);
$('form input[name="children"]').prop("disabled", true);
$("form select").change(function(){
if($(this).val() == 'Married'){
$('form input[name="spouseName"]').removeAttr("disabled")
$('form input[name="children"]').removeAttr("disabled")
}
else{
$('form input[name="spouseName"]').prop("disabled", true);
$('form input[name="children"]').prop("disabled", true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select class="form-control" name="maritalStatus" id="maritalStatus">
<option value="Married">Married</option>
<option selected value="UnMarried">UnMarried</option>
<option value="Male Widow">Male Widow</option>
<option value="FeMale Widow">FeMale Widow</option>
<option value="Divorcee">Divorcee</option>
</select>
<input type="text" class="form-control" name="spouseName" id="spouseName" aria-describedby="spName" placeholder="Spose Name">
<input type="text" class="form-control" name="children" id="children" aria-describedby="childrens" placeholder="Children">
</form>
You can try your required solution with conditions. Please check below code
$(document).ready(function() {
$('form input[name="spouseName"]').prop("disabled", true);
$('form input[name="children"]').prop("disabled", true);
$("#maritalStatus").change(function() {
if($(this).val() !=='UnMarried'){
$('form input[name="spouseName"]').prop("disabled", false);
$('form input[name="children"]').prop("disabled", false);
}else{
$('form input[name="spouseName"]').prop("disabled", true);
$('form input[name="children"]').prop("disabled", true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select class="form-control" name="maritalStatus" id="maritalStatus">
<option value="Married">Married</option>
<option selected value="UnMarried">UnMarried</option>
<option value="Male Widow">Male Widow</option>
<option value="FeMale Widow">FeMale Widow</option>
<option value="Divorcee">Divorcee</option>
</select>
<input type="text" class="form-control" name="spouseName" id="spouseName" aria-describedby="spName" placeholder="Spose Name">
<input type="text" class="form-control" name="children" id="children" aria-describedby="childrens" placeholder="Children">
</form>
The “on change” event is related to the select and not the option
So you have to work with “if … else” in the both cases of values in the select whether “married” or not
Thus i make this change in your code and it works properly
$(document).ready(function() {
$('form input[name="spouseName"]').prop("disabled", true);
$('form input[name="children"]').prop("disabled", true);
$("form select").change(function() {
if(this.value === 'Married'){
$('form input[name="spouseName"]').prop("disabled", false);
$('form input[name="children"]').prop("disabled", false);
}else{
$('form input[name="spouseName"]').prop("disabled", true);
$('form input[name="children"]').prop("disabled", true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form>
<select class="form-control" name="maritalStatus" id="maritalStatus">
<option value="Married">Married</option>
<option selected value="UnMarried">UnMarried</option>
<option value="Male Widow">Male Widow</option>
<option value="FeMale Widow">FeMale Widow</option>
<option value="Divorcee">Divorcee</option>
</select>
<input type="text" class="form-control" name="spouseName" id="spouseName" aria-describedby="spName" placeholder="Spose Name">
<input type="text" class="form-control" name="children" id="children" aria-describedby="childrens" placeholder="Children">
</form>
You didn’t mention whats not working but your onChange wont work.
The css selector has a space
option [value='married']
Should be:
option[value='married']
I was using jquery 3.4.1 for this
I was trying to disable input elements when the different value selected.
$(document).ready(function() {
$('form input[name="spouseName"]').prop("disabled", true);
$('form input[name="children"]').prop("disabled", true);
$("form select option [value='married']").change(function() {
$('form input[name="spouseName"]').prop("disabled", false);
$('form input[name="children"]').prop("disabled", false);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form>
<select class="form-control" name="maritalStatus" id="maritalStatus">
<option value="Married">Married</option>
<option selected value="UnMarried">UnMarried</option>
<option value="Male Widow">Male Widow</option>
<option value="FeMale Widow">FeMale Widow</option>
<option value="Divorcee">Divorcee</option>
</select>
<input type="text" class="form-control" name="spouseName" id="spouseName" aria-describedby="spName" placeholder="Spose Name">
<input type="text" class="form-control" name="children" id="children" aria-describedby="childrens" placeholder="Children">
</form>
