启用/禁用随机生成的文本&在jQuery中使用Checkbox的无线电输入

时间:2017-10-01 10:06:16

标签: javascript php jquery html checkbox

我有一个PHP do while循环,用于生成文本,广播和复选框输入字段。默认情况下禁用文本和无线电字段,我想在检查相应的复选框时启用它们。我已经分配了随机ID并尝试了很多jQuery解决方案,但我仍然遇到问题。

代码:

<?php
$query = "SELECT * FROM `test` ";
$result = mysql_query($query);
$count = 0;
  do{
  $row = mysql_fetch_array($result);
  if($row){
    $id = $row['id'];
    $name = $row['name'];
?>

    <tr>
        <td><?php echo $name; ?></td>
        <td><input type="text" id="txt_<?php echo $count; ?>" class="txt form-control" name="txt" style="width:200px;" disabled /></td>
        <td><input type="radio" id="radio_<?php echo $count; ?>" class="rdo" name="rdo<?php echo $count; ?>" value="yes" disabled /></td>
        <td><input type="radio" id="radio_<?php echo $count; ?>" class="rdo" name="rdo<?php echo $count; ?>" value="no" disabled /></td>
        <td><input type="checkbox" id="check_<?php echo $count; ?>" class="checks" name="check" /></td>
    </tr>

<?php
    $count = $count + 1;
    }
}
while($row);
?>

jQuery的:

<script>
    $('#check_<?php echo $count; ?>').on('change', function(){
        if($(this).is(':checked')){
            $('#txt_<?php echo $count; ?>').prop('disabled', false);
            $('#radio_<?php echo $count; ?>').prop('disabled', false);
        }else{
            $('#txt_<?php echo $count; ?>').prop('disabled', true);
            $('#radio_<?php echo $count; ?>').prop('disabled', true);
        }
    });
</script>

我的解决方案:

    $(function() {
      $('input[type=checkbox]').change(function() {
        if (this.checked) {
          $(this).closest('tr').find('input[type=text]').prop('disabled', false);
          $(this).closest('tr').find('input[type=radio]').prop('disabled', false);
        } else {
          $(this).closest('tr').find('input[type=text]').prop('disabled', true);
          $(this).closest('tr').find('input[type=radio]').prop('disabled', true);
        }
      });
    });

这个功能工作的魅力:)

2 个答案:

答案 0 :(得分:0)

$(document).on("change", ".checks", function () {
    if($(this).prop("checked")) {
        $(this).parents("tr .txt").removeAttr("disabled");
        $(this).parents("tr .rdo").removeAttr("disabled");
    }
})

您还可以使用上面的class属性为此编写单个脚本。

答案 1 :(得分:0)

这个JQuery函数对我有用:)

$(function() {
      $('input[type=checkbox]').change(function() {
        if (this.checked) {
          $(this).closest('tr').find('input[type=text]').prop('disabled', false);
          $(this).closest('tr').find('input[type=radio]').prop('disabled', false);
        } else {
          $(this).closest('tr').find('input[type=text]').prop('disabled', true);
          $(this).closest('tr').find('input[type=radio]').prop('disabled', true);
        }
      });
    });