сделать текстовое поле обязательным, когда я поставлю галочку напротив флажка

Question

Я хочу, чтобы текстовое поле было обязательным, когда я устанавливаю флажок, и отключен в противном случае. Я пытался использовать .next() и .closest(), но я не мог заставить его работать.

<div class="clearfix col-lg-6"> 
    <div class="col-xs-8"><label><input class="checkbox-inline input-lg" name="type[email]" type="checkbox"> E-mails</label></div> 
    <div class="col-xs-4"><input class="form-control" name="emquantity" max="999999999" type="number" ></div>     
</div> 
<div class="clearfix col-lg-6"> 
    <div class="col-xs-8"><label><input class="checkbox-inline input-lg" name="type[sms]" type="checkbox"> sms</label></div> 
    <div class="col-xs-4"><input class="form-control" name="smsquantity" max="999999999" type="number" ></div>     
</div> 

Answer 1

Я надеюсь, что это будет полезно для вас.

<div class="clearfix col-lg-6"> 
<div class="col-xs-8"><label><input class="checkbox-inline input-lg" name="type[email]" type="checkbox" id="email_ckeckbox"> E-mails</label></div> 
<div class="col-xs-4"><input class="form-control" name="emquantity" max="999999999" type="number" id="input_field" ></div>   

<script> 
$(document).ready(functon(){ 
    $(".checkbox-inline").click(function(){ 
     if($(this).is(":checked")) 
     { 
      $(this).closest(".form-control").attr("required","required"); // this is only for HTML 5 validation 
     } 
     else 
     { 
      $(this).closest(".form-control").removeAttr("required"); 
     } 
    }); 
}); 
</script> 

Этот код будет работать только для HTML5 формы представить подтверждение, если вы использовали другую библиотеку JS, то вы должны следовать их правилам.

Answer 2

Попробуйте это:

$("input:checkbox").change(function() { 
 
    var mainobj = $(this).closest(".col-xs-8").closest(".clearfix").find("input"); 
 
    if($(this).is(":checked")) { 
 
     mainobj.attr("required","required"); // add required if checked 
 
    } else { 
 
     mainobj.removeAttr("required"); // remove required if not checked 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="clearfix col-lg-6"> 
 
    <div class="col-xs-8"><label><input class="checkbox-inline input-lg" name="type[email]" type="checkbox"> E-mails</label></div> 
 
    <div class="col-xs-4"><input class="form-control" name="emquantity" max="999999999" type="number" ></div>     
 
</div> 
 
<div class="clearfix col-lg-6"> 
 
    <div class="col-xs-8"><label><input class="checkbox-inline input-lg" name="type[sms]" type="checkbox"> sms</label></div> 
 
    <div class="col-xs-4"><input class="form-control" name="smsquantity" max="999999999" type="number" ></div>     
 
</div>

Answer 3

Может быть, это то, что вы хотите:

1. При вводе проверяется, добавьте требуют атрибута к ближайшему входному числу
2. При входе в unchecked, удалить требуемый атрибут и отключить номер входа

JQuery

$(function() { 
    $('.checkbox-inline').on('change',function(){ 
    var isChecked = ($(this).is(":checked")) ? true : false; 
    if(isChecked) 
    { 
      //Active input number and add require 
      $(this).closest('.clearfix').find('.form-control').prop('disabled', !isChecked).attr("required","required"); 
    } 
    else 
    { 
      //Disabled input number and remove require 
      $(this).closest('.clearfix').find('.form-control').removeAttr("required").prop('disabled', !isChecked); 
    } 

    }); 

}); 

jsFiddle: https://jsfiddle.net/rbbb2m98/