bootstrap jQuery html5 komplexer Validierungscode für Kontrollkästchen und Textfeld

Question

Ich möchte jQuery validieren Code implementieren, um sicherzustellen, dass Benutzer mindestens ein Kontrollkästchen überprüfen. Wenn das Kontrollkästchen aktiviert ist, muss der Benutzer einen Wert in das entsprechende Eingabefeld eingeben. Ich änderte seine a-Tag-ID von is_a1 zu a1

<form id="demo" class="m-t" role="form" method="post" action="register.php"> 
<label class="checkbox-inline"> 
<input type="checkbox" id="is_a1" name="is_a1" value="1">a1</label> 

<label class="checkbox-inline"> 
<input type="checkbox" id="is_a2" name="is_a2" value="1">a2</label> 

<label class="checkbox-inline"> 
<input type="checkbox" id="is_a3" name="is_a3" value="1">a3</label> 
<input type="text" name="a1_input" id="a1_input" value=""> 
<input type="text" name="a2_input" id="a2_input" value=""> 
<input type="text" name="a3_input" id="a3_input" value=""> 
<button type="submit" class="btn btn-default block full-width m-b">submit</button> 

</form> 
<script> 
$(document).ready(function() { 
    $("#demo").submit(function(event) { 
     if ($("#a1").is(':checked')){ 
      if ($("#a1_input).val().length > 0) { 
       return true; 
      } 
      else { 
      alert("a1_input is empty"); 
      return false; 
      } 
     } 
     if ($("#a2").is(':checked')){ 
     if ($("#a2_input).val().length > 0) { 
       return true; 
      } 
      else { 
      alert("a2_input is empty"); 
      return false; 
      } 
     } 
     if ($("#a3").is(':checked')){ 
      if ($("#a3_input).val().length > 0) { 
       return true; 
      } 
      else { 
      alert("a3_input is empty"); 
      return false; 
      } 
     } 
     alert("please check at least one check box"); 

    }); 

    }); 
</script> 

Answer 1

gerade durchlaufen die Kontrollkästchen, und überprüfen Sie die checked Eigenschaft:

$('#demo .btn').on('click', function() { 
    var checked = []; 
    $('#demo input[type="checkbox"]').each(function (idx, obj) { 
     if ($(this).prop("checked") === true) { 
      var parts = $(this).attr('name').split("_"); 
      checked.push(parts[1]); 
     } 
    }); 
    if (checked.length > 0) { 
     $.each(checked, function (idx, val) { 
      if ($('#' + val + '_input').val() === "") { 
       alert(val + ' checked but no input'); 
      } 
     }); 
    } else { 
     alert('nothing checked'); 
    } 
}); 

https://jsfiddle.net/mkkmvrj3/2/

Answer 2

Hier ist Ihre Lösung für die Zeit. Arbeits Demo: https://jsfiddle.net/mgfzhbt4/1/

$('input[type="text"]').prop('disabled',true); 
$('input[type="checkbox"]').change(function(){ 
    if($(this).is(':checked')) 
    { 
    var id = $(this).attr('id'); 
    alert($(this).attr('id')); 
    $('#'+id+'_input').prop('disabled',false); 
    }else 
    { 
    var id = $(this).attr('id'); 
    $('#'+id+'_input').html(''); 
    $('#'+id+'_input').prop('disabled',true); 
    } 
}) 

$('#submitBtn').click(function(e){ 
    if(!$('textbox').is(':disabled')) 
    { 
    if($(this).val().length == 0) 
    { 
     alert('Field empty'); 
    e.preventDefault(); 
    } 

    } 
})