Question

我的样本表：

 ____________________________________________________________________________
  | Select All |  Quantity  | Name & Description  |        Remarks           |
  ____________________________________________________________________________
  |   []           |    2       |    BallPen          | text field here      |
______________________________________________________________________________
  |   []           |    10      |    Pencil           | text field here      |
  ____________________________________________________________________________

我想在用户点击第一个复选框时启用第一个文本字段。 description =“BallPen”或在单击第二个复选框时启用第二个文本字段。禁用文本字段的默认值。我怎么能这样做？

表值来自我的数据库。

这是我的代码：

if(isset($_POST['faculty'])){
         $faculty = $_POST['faculty'];
      $query = mysql_query("SELECT * FROM are A, are_item AI WHERE AI.Reque = '$faculty' AND A.Reque = '$faculty' AND A.are_no = AI.are_no");
      $row = mysql_fetch_array($query);
      $are_no = $row["are_no"];

      $query = mysql_query("SELECT * FROM user_info WHERE id = '$faculty'");
        while($row = mysql_fetch_array($query)){
            $firstname = $row['firstname'];
            $middle = $row['middlename'];
            $last = $row['lastname'];
            $name = $firstname . " " .$middle . " " . $last;
                  }           
        echo" Item(s) ownned by " . $name  ;


    echo '<table class="table text-center" style="border-collapse:collapse">';

    echo "<thead>";
        echo"<th align = 'center'><font size='1'>Select All</font><input type='checkbox' id='selectall' onClick='selectAll(this)'/></th>";
        echo "<th align = 'center'>Quantity</th>";
        echo "<th align = 'center'>Unit</th>";
        echo "<th align = 'center'>Name & Description</th>";
        echo "<th align = 'center'>PR No.</th>";
        echo "<th align = 'center'>Date Acquired</th>";
        echo "<th align = 'center'>Property Number</th>";
        echo "<th align = 'center'>Number of items</th>";

    echo "</thead>";
      echo "<tbody>";
   $query = mysql_query("SELECT * FROM tblitems I, are_item AI ,tblpur P WHERE AI.are_no = '$are_no' AND I.itemid = AI.itemid AND I.pr_no = P.pr_no");
             $k = 1;
          while($row = mysql_fetch_array($query)){
          $item_id = $row["itemid"];

            $check = 'check' . $k;
          $quantity = $row["quantity"];
          $unit = $row["unit"];
          $description = $row["description"];
          $purchase_no = $row["pr_no"];
          $property = $row["property_no"];
          $date_acquired = $row["date_acquired"];
         $stat = $row["stat"];

             if($stat == '1'){

             }
             else
             {

            echo "<tr>";

            ?>
             <td><input name="check[]" type="checkbox" value = "<?php echo $row['itemid']; ?>"></td>
            <?php
            echo "<td align = 'center'>$quantity</td>";
            echo "<td align = 'center'>$unit</td>";
            echo "<td align = 'center'>$description</td>";
            echo "<td align = 'center'>$purchase_no</td>";
            echo "<td align='center'>$property</td>";
             echo "<td align='center'>$date_acquired</td>";




             ?>
            <td align="center"><input type="text" name = "<?php echo $noof; ?>" maxlength=5 ></td>
              <?php
              echo "</tr>";

          }
      }
    echo "</tbody>";
    echo "</table>";
     $k++;
     }
    ?>

Answer 1

使用jQuery来实现这一目标。

<tr>
    <td><input type="checkbox" class="mode" data-for="text1"></td>
    <td>Blah blah blah</td>
    <td><input type="text" id="text1" disabled></td>
</tr>

<script>
    $('.mode').click( function() {
        var f = $(this).attr('data-for');
        $('#' + f).attr('disabled', !$(this).prop('checked'))
    } );
</script>

选中所有选项

<input type="checkbox" id="all">

<script>
    $('#all').click( function() {
        $('table input[type="text"]').attr('disabled', !$(this).prop('checked'))
    } );
</script>

Answer 2

由于您使用的是表格，因此通用解决方案可能类似于

jQuery(document).ready(function(){
  $("table").delegate("input[type='checkbox']", "change", function(){
    if($(this).prop("checked") == true){
      $(this).closest("tr").find("input[type='text']").attr("disabled", false);
    } else {
      $(this).closest("tr").find("input[type='text']").attr("disabled", true);
    }
  });
});

我已经使用.delegate完成了示例，因为您可能会在将来使用jQuery / AJAX添加额外的行。

检查此jsFiddle以获取演示。

Answer 3

HTML代码

<table>
    <tr>
        <th><input type="checkbox" id="chk" /></th>
        <th> Quantity </th>
        <th> Name & Description</th>
        <th> Remarks </th>
    <tr>
    <tr>
        <td><input type="checkbox" class="chk" /></td>
        <td>1</td>
        <td> BallPen </td>
        <td><input type="text" disabled  /></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="chk" /></td>
        <td>2</td>
        <td> BallPen </td>
        <td><input type="text" disabled /></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="chk" /></td>
        <td>3</td>
        <td> BallPen </td>
        <td><input type="text" disabled /></td>
    </tr>
<table>

jQuery代码

$(function(){ 
    $('input.chk').click(function(){
       $(this).closest('td').next('td').next('td').next('td').children('input').attr('disabled',!this.checked);
    });
});

如何在选中第一个复选框时启用第一个文本字段

3 个答案: