单击复选框禁用文本框使用jquery无效

时间:2014-06-26 08:02:16

标签: jquery checkbox

我无法删除文本并使用jquery代码禁用文本框,下面是我的代码。无论是选中还是取消选中复选框,警报也会起作用。请建议。

            

   <script>
        $(document).ready(function(){
          var arr= new Array('1','2','3','4','5');
          for(var i=0;i<arr.length;i++)
              {
                $("#Q4x1_"+arr[i]).click(function(){
                    if($("#Q4x1_"+arr[i]).prop('checked',true))
                        {
                            alert("hi");
                            $("#Q4x2_"+arr[i]).val('');
                            $("#Q4x2_"+arr[i]).prop('readOnly',true);
                        }
                    else
                        {
                            $("#Q4x2_"+arr[i]).val('testing');
                                                $("#Q4x2_"+arr[i]).prop('readOnly',false);
                        }
                });
              }
        });
      </script>
  </head>

  <body>
  <table border="1">
  <tr>
  <td><input type="checkbox" id="Q4x1_1"></td>
  <td><input type="text" id="Q4x2_1"></td>
  </tr>

    <tr>
  <td><input type="checkbox" id="Q4x1_2"></td>
  <td><input type="text" id="Q4x2_2"></td>
  </tr>

    <tr>
  <td><input type="checkbox" id="Q4x1_3"></td>
  <td><input type="text" id="Q4x2_3"></td>
  </tr>

    <tr>
  <td><input type="checkbox" id="Q4x1_4"></td>
  <td><input type="text" id="Q4x2_4"></td>
  </tr>

    <tr>
  <td><input type="checkbox" id="Q4x1_5"></td>
  <td><input type="text" id="Q4x2_5"></td>
  </tr>


  </table>
  </body>
  </html>

1 个答案:

答案 0 :(得分:0)

您可以简单地使用:

$('input:checkbox').change(function(){
 var checked = $(this).prop('checked');
 var nextinp=$(this).parent().next().find('input');
 nextinp.prop('disabled', checked);
 if(checked)
   nextinp.val(''); 
});

<强> Working Demo