ブートストラップjQuery html5チェックボックスとテキストボックスの複合チェックコード

Question

少なくとも1つのチェックボックスをチェックするためにjQueryの検証コードを実装したいと思います。チェックボックスがオンになったら、一致する入力テキストボックスに値を入力する必要があります。ここで

<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

ちょうどチェックボックスを反復処理し、checkedプロパティを確認しますCK8 @

$('#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

は時間のために、私はis_a1からa1にaタグIDを変更して、あなたのソリューションです。ワーキングデモ：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(); 
    } 

    } 
})