tomantford tomantford - 5 months ago 9
jQuery Question

Toggling a disabled radio button and changing checked value

I'm running jQuery script to disable a radio button when a select from a dropdown is chosen. At the same time, I'm asking the other radio button to become checked.

The disable and re-enable works fine, however the checked attribute only works the first time. And only on the first radio.

Here is the js code:

$(document).ready(function () {
// disable the no end date radio button if the selection is changed to lifetime:
$("#budget_type").change(function () {
if ($(this).val() === "lifetime_budget") {
$('#schedule_no_end').attr("disabled", true);
$('#run_on_schedule').attr("disabled", false);

$('.schedule_end_radio').attr('checked',true);
} else {

$('#run_on_schedule').attr("disabled", true);
$('#schedule_no_end').attr("disabled", false);

$('.run_always').attr('checked',true);

}
});

});
});


and the HTML:

Budget: <select id="budget_type" name="budget_type">
<option value="daily_budget">Daily budget</option>
<option value="lifetime_budget">Lifetime budget</option>
</select>
Schedule End: <label>No End Date<input checked name="schedule_end" id="schedule_no_end" value="ongoing"
type="radio"></label><br>
<label>End on:<input name="schedule_end" id="schedule_end_radio" class="schedule_end_radio" value="endondate" type="radio"></label>
<input class="datetimepicker" name="end_date" type="text"><br><br>

Advert Scheduling: <label>Run adverts all the time<input checked name="advert_scheduling" id="run_always" class="run_always" value="allthetime"
type="radio"></label>
<label>Run adverts on schedule<input name="advert_scheduling" id="run_on_schedule" value="onschedule" type="radio" disabled></label>

Answer
  Try this
 $(document).ready(function () {
    $("#budget_type").change(function () {
        if ($(this).val() === "lifetime_budget") {
            $('#schedule_no_end').prop("disabled", true);
            $('#run_on_schedule').prop("disabled", false);

            $('.schedule_end_radio').prop('checked',true);
        } else {

            $('#run_on_schedule').prop("disabled", true);
            $('#schedule_no_end').prop("disabled", false);

            $('.run_always').prop('checked',true);

        }
    });

});

}); `