1

我有一个简单的表格，其中包含一系列是/否单选按钮问题，并添加了一些 Javascript，应该将红色应用于相邻文本区域输入的标签。它正在工作，但不适用于表中的第一行 - 所有其他行都有效。

这是表中前 3 行的 html 的缩减版本：

<table width="71%" class="record">

    <tr>
      <td width="63%" valign="top" class="field_name_left"><p><strong>Section 1</strong><br>
        (a) section 1A.</p>
        </td>
      <td width="11%" valign="top" class="field_data">
                    <input type="radio" name="Scale1A" value="Yes" validate = "required:true " class = "radioClick">Yes                     
                        <input type="radio" name="Scale1A" value="No" validate = "required:true " class = "radioClick">No           <label for = "Scale1A" class = "error">Please ensure this is completed</label> </td>
      <td width="26%" valign="top" class="field_data">
      <span class="field_name_left style1" id = "Scale1AWhereLabel"><strong>Where:</strong></span> 
      <textarea id = "Scale1AWhere" class="where" name="Scale1AWhere" cols="25" rows="2" validate="required:'input[name=Scale1A][value=Yes]:checked'"> </textarea>          
      <label for = "Scale1AWhere" class = "error">Please ensure this is completed</label>        </td>
      </tr>
    <tr>
      <td valign="top" class="field_name_left">            (b) section 1B.</td>
<td valign="top" class="field_data">              <input type="radio" name="Scale1B" value="Yes" validate = "required:true " class = "radioClick" />
        Yes                            <input type="radio" name="Scale1B" value="No" validate = "required:true " class = "radioClick" />
        No                          <label for = "Scale1B" class = "error">Please ensure this is completed</label>          </td>
      <td valign="top" class="field_data"><span class="field_name_left style1" id = "Scale1BWhereLabel"><strong>Where:</strong></span>
          <textarea id = "Scale1BWhere" class="where" name="Scale1BWhere" cols="25" rows="2" validate="required:'input[name=Scale1B][value=Yes]:checked'"></textarea> <label for = "Scale1BWhere" class = "error">Please ensure this is completed</label>           </td>
  </tr>
      <tr>
      <td width="63%" valign="top" class="field_name_left"><strong>Section 2.</td>
      <td valign="top" class="field_data">
                <input type="radio" name="Scale2" value="Yes"validate = "required:true" class="radioClick">Yes                      <input type="radio" name="Scale2" value="No"validate = "required:true" class="radioClick">No            <label for = "Scale2" class = "error">Please ensure this is completed</label>     </td>
      <td valign="top" class="field_data">
      <span class="field_name_left style1" id = "Scale2WhereLabel"><strong>Where:</strong></span>
      <textarea id = "Scale2Where" class="where" name="Scale2Where" cols="25" rows="2" validate="required:'input[name=Scale2][value=Yes]:checked'"></textarea> <label for = "Scale2Where" class = "error">Please ensure this is completed</label></td>
      </tr>

      <tr class="submit_btn">
                      <td colspan="3">
                            <input type="submit" name="-edit" value="Finish">
                            <input type="reset" name="reset" value="Reset">            </td>
        </tr>
      </table>

这是我的脚本：

$(".radioClick").click(function(){
    theStr = $("#"+this.name+"Where").val().length;
    if($(this).val()=="Yes" && theStr == 0){
        $("#"+this.name+"WhereLabel").addClass("emphasise");
    } else {
        $("#"+this.name+"WhereLabel").removeClass("emphasise");
    }
$(".where").keyup(function(){
    str = this.value.length;
    if(str == 0){
        $("#"+this.name + "Label").addClass("emphasise");
    }else{
        $("#"+this.name + "Label").removeClass("emphasise");
    }
});
});

$.metadata.setType("attr", "validate");
$("#editRecord").validate();

你可以在这个jsFiddle上看到这个

出于某种原因，当单击“是”按钮时，我无法理解问题 1A 的 Where 标签永远不会变为红色，但是否适用于所有其他人？

4

1 回答 1

2

问题是您的文本区域中有一个额外的空间。你需要修剪它。或删除它。

theStr = $.trim($("#"+this.name+"Where").val()).length;

文本区域中的额外空间：-

  <textarea id = "Scale1AWhere" class="where" 
  name="Scale1AWhere" cols="25" rows="2"
   validate="required:'input[name=Scale1A][value=Yes]:checked'"> </textarea>

固定代码

于 2013-05-13T23:11:27.407 回答