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

也许这就是你想要的：

选中输入后，将require属性添加到最近的输入数字
如果未选中输入，请删除require属性和已禁用的输入数字

<强>的jQuery

'rewrite' => array( 'slug' => 'type' )

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

选中复选框时，需要输入文本框

3 个答案: