javascript - How do I disable text areas based on what radio button is checked when the page loads? -
i want improve upon script disabling text areas radio button selection. when "yes" selected text areas should disabled , enabled when "no" selected.
what need change text areas disabled when page first loads , if correct radio button checked?(yes checked default if no change has been made)
please bare in mind page refreshed , redirected need check actual selection on radio buttons. setting them disabled on load before disabled text areas when had correct radio button selected.
html
<div class="group"> <input type="radio" name="choice1" value="yes" checked/>yes <input type="radio" name="choice1" value="no" />no </div> <div class="group"> <input type="radio" name="choice2" value="yes" checked/>yes <input type="radio" name="choice2" value="no" />no </div> <div class="group"> <input type="radio" name="choice3" value="yes" checked/>yes <input type="radio" name="choice3" value="no" />no </div> <div> <textarea data-trigger="choice1" rows="4" cols="20"></textarea> <textarea data-trigger="choice2" rows="4" cols="20"></textarea> <textarea data-trigger="choice3" rows="4" cols="20"></textarea> </div>
javascript/jquery
$(function () { var $choices = $(".group").find(":radio"); $choices.on("change", function () { var $this = $(this); var choicename = $this.attr('name'); var tarea = $('[data-trigger="' + choicename + '"]'); if ($this.val() === "yes") { tarea.val(''); tarea.prop('readonly', true); tarea.css('background-color', '#ebebe4'); } else { tarea.prop('readonly', false); tarea.css('background-color', '#ffffff'); } }); });
hope that's clear enough.
try
$(".group").find(":radio[value=yes]:checked").each(function () { $('[data-trigger="' + $(this).attr("name") + '"]').prop('readonly', true).css('background-color', '#ebebe4'); });
Comments
Post a Comment