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 に答える