2011-07-16 263 views
0

我遇到了讓我的文本字段隱藏/正確顯示的問題。這裏是例子:jquery顯示/隱藏字段

JFiddle Example

我要的是當選擇的值等於一個被隱藏了一切文本字段只顯示。複選框部分工作正常。

代碼從複製的jsfiddle:

<html> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<title>Test Page</title> 
<body> 
    <table id="testList"> 
    <tbody> 
     <tr> 
     <td><input type='checkbox'></td> 

     <td><select> 
    <option value="0">Volvo</option> 
    <option value="1">Saab</option> 
    <option value="2">Mercedes</option> 
    <option value="3">Audi</option><input type='text' style="display: none"> 
      </select> 
</td> 
     </tr> 
     <tr> 

     <td><input type='checkbox'></td> 
<td><select> 
    <option value="0">Volvo</option> 
    <option value="1">Saab</option> 
    <option value="2">Mercedes</option> 
    <option value="3">Audi</option> 
</select><input type='text' style="display: none"> 
     </td> 
     </tr> 
     <tr> 
     <td><input type='checkbox'></td> 
<td><select> 
    <option value="0">Volvo</option> 
    <option value="1">Saab</option> 
    <option value="2">Mercedes</option> 
    <option value="3">Audi</option> 
    </select> <input type='text' style="display: none"> 
</td> 
     </tr> 
    </tbody> 
    </table> 
<script> 
jQuery(function($) { 


     $("select").change(function() { 
     var $this = $(this), 
      $checkbox = $this.parent().prev().find(":checkbox"); 

     if ($this.val() != 0) { 
     $checkbox.attr("disabled", true); 
      if($this.val() == 1){ 
      $(":text").show(); 
      } 
      else{ 
       $(":text").hide(); 
      }  


     } else { 
      $checkbox.removeAttr("disabled"); 
     } 

      }); 

     $(":checkbox").change(function() { 
     var $this = $(this), 
      $select = $this.parent().next().find("select"); 

     if ($this.is(":checked")) { 
      $select.attr("disabled", true); 
     } else { 
      $select.removeAttr("disabled"); 
     } 
     }); 

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

回答

2

http://jsfiddle.net/vsYB8/20/

而不是使用$(':text').show()你需要$(this).siblings(':text').show()

這將選擇相應的文本框,而不是全部。

+0

如何讓文本字段在值爲0時也隱藏? – billy