当表单中有多个复选框时，HTML复选框验证将被中断

在下面的表单中，如何忽略禁用的复选框。表单中的预期行为是，如果用户没有选中模型复选框并单击提交按钮，则应提交表单。如果模型复选框被选中，用户必须输入数据。只要页面上没有其他复选框，此行为就会起作用。如果有另一个复选框，并且没有选中模型复选框就点击提交按钮，则会引发警报。我如何忽略表单中的其他复选框来实现所需的行为？谢谢！当表单中有多个复选框时，HTML复选框验证将被中断

$(document).ready(function() { 
 
    $('#checkModelBtn').click(function() { 
 
     var isCheckboxChecked = $("input[type=checkbox]:checked").length; 
 
     var isTextEntered = $("input.childModel").val().length; 
 
     
 
     if (isTextEntered || !isCheckboxChecked) { 
 
      //alert("validation passed!"); 
 
     } else { 
 
      alert("Please enter the Model Number"); 
 
     } 
 

 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<table> 
 
<tr> 
 
<td> 
 
<p><h2>MODEL:</h2></p> 
 
<input type="checkbox"> Model # 
 
<input type="text" size="12" class="childModel"><BR> 
 
</td> 
 

 
<td> 
 
THIS CHECKBOX BREAKS THE FUNCTIONALITY<p> 
 
<input type="checkbox" checked disabled> Some text here</td> 
 
</tr> 
 
</table> 
 

 
<hr> 
 
<input type="submit" name="submit" value="submit" id="checkModelBtn"/>

来源

2017-09-11 familyGuy

-1

不理你不想验证你需要一个办法忽略它在你的验证的复选框，您可以通过使用输入域做到这一点。为您的复选框选择更改从$("input[type=checkbox]:checked")到$(".childModel").prev("input[type=checkbox]:checked")

例子：

$(document).ready(function() { 
 
    $('#checkModelBtn').click(function() { 
 
    var isCheckboxChecked = $(".childModel").prev("input[type=checkbox]:checked").length; 
 
    var isTextEntered = $("input.childModel").val().length; 
 

 
    if (isTextEntered || !isCheckboxChecked) { 
 
     //alert("validation passed!"); 
 
    } else { 
 
     alert("Please enter the Model Number"); 
 
    } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<table> 
 
    <tr> 
 
    <td> 
 
     <p> 
 
     <h2>MODEL:</h2> 
 
     </p> 
 
     <input type="checkbox"> Model # 
 
     <input type="text" size="12" class="childModel"> 
 
     <BR> 
 
    </td> 
 

 
    <td> 
 
     THIS CHECKBOX BREAKS THE FUNCTIONALITY 
 
     <p> 
 
     <input type="checkbox" checked disabled> Some text here</td> 
 
    </tr> 
 
</table> 
 

 
<hr> 
 
<input type="submit" name="submit" value="submit" id="checkModelBtn" />

来源

2017-09-11 22:23:53 j08691

匿名懦夫downvoter护理评论这个答案怎么是不是错了有用吗？ – j08691

的复选框，需要有一个唯一的选择。

$(document).ready(function() { 
 
    $('#checkModelBtn').click(function() { 
 
     var isCheckboxChecked = $("input[name='model_number']:checked").length; 
 
     var isTextEntered = $("input.childModel").val().length; 
 
     
 
     if (isTextEntered || !isCheckboxChecked) { 
 
      //alert("validation passed!"); 
 
     } else { 
 
      alert("Please enter the Model Number"); 
 
     } 
 

 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<table> 
 
<tr> 
 
<td> 
 
<p><h2>MODEL:</h2></p> 
 
<input type="checkbox" name="model_number"> Model # 
 
<input type="text" size="12" class="childModel"><BR> 
 
</td> 
 

 
<td> 
 
THIS CHECKBOX BREAKS THE FUNCTIONALITY<p> 
 
<input type="checkbox" checked disabled> Some text here</td> 
 
</tr> 
 
</table> 
 

 
<hr> 
 
<input type="submit" name="submit" value="submit" id="checkModelBtn"/>

来源

2017-09-11 22:31:04

当表单中有多个复选框时，HTML复选框验证将被中断

回答

相关问题