mercredi 29 novembre 2017

Prevent checking others checbox if textarea is empty

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