jQuery验证一些动态加载的单选按钮

时间:2018-01-16 13:44:42

标签: javascript jquery validation

该项目正在使用考勤登记册,他们需要以1-4的等级绘制学生的行为和进度,一旦选择了一个脚本,就会创建一个相关评论列表。如果教师标记为2或更少,则单选按钮具有强制类,返回的代码如下:

<table class="comment-list">
 <tbody>
  <tr><td><input type="radio" name="progresscomment[123456]" value="25" class="mandatory"> &nbsp;&nbsp;&nbsp;Work not always on time</td></tr>
  <tr><td><input type="radio" name="progresscomment[123456]" value="26" class="mandatory"> &nbsp;&nbsp;&nbsp;Has some difficulties with coursework</td></tr>
  <tr><td><input type="radio" name="progresscomment[123456]" value="27" class="mandatory"> &nbsp;&nbsp;&nbsp;Assessment failed</td></tr>
  <tr><td><input type="radio" name="progresscomment[123456]" value="28" class="mandatory"> &nbsp;&nbsp;&nbsp;Standard of work unacceptable</td></tr>
 </tbody>
</table>

同一页面上的另一张表可能看起来像

<table class="comment-list">
 <tbody>
  <tr><td><input type="radio" name="progresscomment[444555]" value="25" class="mandatory"> &nbsp;&nbsp;&nbsp;Work not always on time</td></tr>
  <tr><td><input type="radio" name="progresscomment[444555]" value="26" class="mandatory"> &nbsp;&nbsp;&nbsp;Has some difficulties with coursework</td></tr>
  <tr><td><input type="radio" name="progresscomment[444555]" value="27" class="mandatory"> &nbsp;&nbsp;&nbsp;Assessment failed</td></tr>
  <tr><td><input type="radio" name="progresscomment[444555]" value="28" class="mandatory"> &nbsp;&nbsp;&nbsp;Standard of work unacceptable</td></tr>
 </tbody>
</table>

我知道......

    $($('.mandatory').each(function() {).each(function(){

...不会像检查同一组的所有元素一样工作。

页面上会有很多这些表格,每个表格的数组键都不同,即示例中的所有表格都相同,但另一个表格在页面上的其他表格将具有不同的键。我想确保在强制要求的每个组中至少检查一个。我相信这可以使用名称来完成,但我无法将解决方案可视化。

提前感谢您的所有帮助

编辑,我已经设法接近我需要帮助的最后一步的解决方案。

解决方案最终使用相关下拉菜单的ID来动态选择单选按钮组。

JavaScript如下

    $( ".behaviour-sel" ).each(function( index ) {
     //check if empty
     if($(this).val() == ""){
      alert("You must enter behaviour for ALL students");
      return rv = false;
     }

     //check if it's less than 2
     if($(this).val() <= 2){     
      var id = $(this).attr("id");
      id = id.replace('-behaviour', '');

      if(!$('input[name="behaviourcomment[' + id + ']"]').is(':checked')) { 
      alert("If you scored behaviour less than 2, you MUST select a supporting comment");
       return rv = false;
      }
  }

1 个答案:

答案 0 :(得分:0)

解决方案最终使用相关下拉菜单的ID来动态选择单选按钮组。

JavaScript如下

$( ".behaviour-sel" ).each(function( index ) {
 //check if empty
 if($(this).val() == ""){
  alert("You must enter behaviour for ALL students");
  return rv = false;
 }

 //check if it's less than 2
 if($(this).val() <= 2){     
  var id = $(this).attr("id");
  id = id.replace('-behaviour', '');

  if(!$('input[name="behaviourcomment[' + id + ']"]').is(':checked')) { 
  alert("If you scored behaviour less than 2, you MUST select a supporting comment");
   return rv = false;
  }
}