Question

我有一个项目列表，每个项目都附有一个复选框。我目前正在使用jQuery表单和验证插件。我想使用它，只有当用户选中复选框时，才会验证与该复选框关联的文本字段，否则无需验证。

以下是演示代码

<form action='feeddatabase.php' method=post id='feedlisting'>
<input type=submit value='Submit!' name=submit>

<table border=2>
    <input type=text name='title1' size=100 style='display:none' value="Babes with curves are the new rage in Bollywood">
 <tr>
<td rowspan="9"><input type='checkbox' class='article_check'  name='selectArticle[]'   value=1 /></td>
<td colspan="2"><h3><u><a href='http://www.santabanta.com/cinema.asp?pid=47880'>Babes with curves are the new rage in Bollywood</a></u></h3></td>
</tr>
<tr>
<td><b>Url</b></td>
 <td><input type=text  class='article_req_info' name='url1' size=100 value='http://www.santabanta.com/cinema.asp?pid=47880'>
                    <input type=text style='display:none' name='blogurl1' size=100 value='http://www.santabanta.com/cinema.asp'>
                    <input type=text style='display:none' name='blogtitle1' size=100 value="Latest Bollywood news, Movie Review and Previews">
                    <input type=text style='display:none' name='blogfeedurl1' size=100 value='http://www.santabanta.com/rss/cinema.asp?cat=Mirch Masala'></td>

 </tr>
 <tr>
 <td><b>Author</b></td>
 <td><input type=text  name='author1' size=100 value=''></td>
 </tr>

 <tr>
  <td><b>Date</b></td><td><input type=text name='date1' size=100 value='2011-7-08'> </td>
 </tr>

 <tr>
 <td><b>Desc</b></td>
  <td><input type=text name='desc1' size=100 value="The curve is more powerful than the sword. And the one time sex goddess should know this from her experience...">
                    <input type=text  style='display:none' name='html_content1'  value='The curve is more powerful than the sword. And the one time sex goddess should know this from her experience...'><br></td>
  </tr>

 <tr>
 <td><b>Featured</b></td><td><input type='checkbox' name='featuredArticle1' value=1 /></td>
 </tr>

 <tr>
 <td><b>Category</b></td>
 <td><select name="category1">
<option value="Technology"  >Technology</option>
<option value="Social" >Social</option>
<option value="Entertainment"selected >Entertainment</option>
<option value="Gaming"  >Gaming</option>
<option value="News"  >News</option>
<option value="Sports"  >Sports</option>
<option value="Videos"  >Videos</option></select></td>
 </tr>

 <tr>
 <td><u>Tags: </u></td>
 <td><input type=text name='tag1' size=100 value='new rage,curves,babes'></td>
 </tr>

 <tr>
 <td><u>Images for the post from Content/Google/Default</u></td>
 <td><input type=radio name="group1" checked value='http://media.santabanta.com/newsite/cinemascope/images/sonakshi24_big.jpg' \>
 </td>
 </tr>

 </table>
</form>

使用的jquery如下

<html> 
<head> 

 <script type="text/javascript" src="../javascripts/jquery.js"></script> 
<script type="text/javascript" src="../javascripts/jquery.form.js"></script> 
<script type="text/javascript" src="../javascripts/jquery.validate.js"></script> 
<script type="text/javascript" src="../javascripts/jquery.loady.js"></script> 


<script type="text/javascript">

 /* $("#loader").loady({
                    url: "sharer.php"
                }); */ 

$(document).ready(function() { 
    // bind form using ajaxForm 

        /* $(this).loady({
                    url: "sharer.php"
                }); */


        $('.article_check').click(function() {

             rules: {
                article_info: {
                    required: true,

                };  
            }
            });

});
</script>
 </head>
 <body>

</body>

</html>

如果我在某个地方错了，请取决于我...

编辑：

现在使用以下脚本

 <script>

  $(document).ready(function(){
  $("#feedlisting").validate();
  }); 



 function countChecked() {
  var n = $("input[name='selectArticle[]']:checked").length;
  var v = $("input[name='selectArticle[]']:checked").val();

  if(v)
  {
  alert(v);
  alert("url"+v);
  $("#url"+v).addClass('required url');
  }
  else
  {

$("#url"+v).removeClass('required url');
  }
  $("div").text(n + (n <= 1 ? " is" : " are") + " checked!" + " value :" + v);
}
//countChecked();
$("input[name='selectArticle[]']:checkbox").click(countChecked);
</script>

它工作得很好，除了当我取消选中时，removeClass的东西不起作用。当我检查它动态添加'required url'类但是当我取消选中时，不会删除它。我做错了吗？

Answer 1

几种选择：
1. add a custom rule用于文本字段的vaildation;验证功能会检查复选框的值，然后才验证文本字段 2.在复选框中添加onchange事件，这将在相关文本字段中添加/删除类'required'（请记住，验证规则也可以使用类属性在标记中定义）

修改
回答你的问题，这是一个简单的解决方案：

我假设您有一个静态（预先知道）要更改的文本字段列表。例如 - 如果这些字段是txtName和txtAddress，那么您的代码可能类似于：

$("#checkBox").change(function () { if ($("#checkBox").val() { //if checkbox is checked- add the 'required' class $("#txtName").addClass('required'); $("#txtAddress").addClass('required'); } else { //if checkbox is unchecked- remove the 'required' class $("#txtName").rmeoveClass('required'); $("#txtAddress").removeClass('required'); } });

根据复选框值验证文本字段 - jQuery验证

1 个答案: