A form with some textareas and a sumbit button are all disabled, each of textarea has a checkbox aside.
When checkbox is checked:
1- A message shows (You should not let activated textarea empty)
2- Submit button remains disabled
3- When start writing message hides and button enable.
When checkbox is unchecked :
1- message hides
2- textarea related to it is cleared if it has some texts
3-button returns to disabled
Everything is perfect so far with my codes below. Now, how can i prevent from checking others checkboxes if there is already one that is already checked with an empty textarea ? The logic is if a textarea is enabled it must receive text.
//html part
//handling checkbox
$('input:checkbox').change(function() {
if ($(this).prop('checked')) {
$(".textareaalert").text("Don't let this activated textarea empty");
$(".textareaalert").slideDown("slow");
$("#submit").prop("disabled", true);
} else {
$(".textareaalert").slideUp("slow");
$("#submit").prop("disabled", true);
$("textarea").val('');
}
});
//handling textarea
$("textarea").keyup(function() {
var textareaLength = $(this).val().length;
if (textareaLength == 0) {
$(".textareaalert").text("Don't let this activated textarea empty");
$(".textareaalert").slideDown("slow");
$("#submit").prop("disabled", true);
} else {
$(".textareaalert").slideUp("slow");
$("#submit").prop("disabled", false);
}
});
<script src="http://ift.tt/1oMJErh"></script>
<div class="textareaalert" style="display:none"></div>
<form class="horizontal">
<div class="form-group">
<label>Infancia</label>
<div class="col-md-9">
<textarea class="form-control" id="infancia" disabled></textarea>
</div>
<div class="col-md-2">
<input type="checkbox"> <label>Activo</label>
</div>
</div>
// more text area below
</form>
Aucun commentaire:
Enregistrer un commentaire