Question

<label for="chkPassport">
    <?php
    $select_size = $common->select('size_m', '');
    $i = 0;
    foreach ($select_size as $sizes) {
        $s = $sizes['sizename'];
        ?>
        <input type="checkbox" id="chkPassport<?php echo $s; ?>" class="current"/>
        <?php echo $sizes['sizename']; ?>
    </label>
    qty:
    <input type="text" id="txtPassportNumber<?php echo $i;?>"  disabled="disabled" class="current<?php echo $s; ?>"/>
    <br/>
    <?php
    $i++;
}
?>

这是我的jquery代码，我正在通过此

启用一个文本框

id="txtPassportNumber<?php $i; ?>"

即使我在给予

，我也没有得到文本框的ID

<table> <thead> <tr> <th> aaa </th> <th> aaabbb </th> <th> aaabbbccc </th> <th> aaabbbcccddd </th> </tr> </thead> <tbody> <tr> <td> asdf </td> <td> asdfaaabbb </td> <td> asdfaaa </td> <td> asd </td> </tr> </tbody> </table>

我有5种尺寸，每种尺寸我想添加数量当我点击S我想要启用它的文本框当我点击M它的文本框必须启用。我正在启用一个文本框onclick大小S因为它不是把我的身份带到那里。帮助我这个

Answer 1

您要求解决选择问题所以这里有一个小小的JQuery＆＃39;代码。

我想解释一下我用以下代码做了什么。在您的代码中，您尝试使用要更改的元素的ID。问题是，如果您拥有相同的ID，则ID必须对每个元素都是唯一的，那么所有这些元素都将被视为一个。

此外，您试图为ID（id="txtPassportNumber<?php echo $i;?>"）分配一个号码，这使得识别它变得难以理解。

所以我在我的代码中所做的就是将侦听器从ID移动到类，这使得它更容易并释放ID，让您随心所欲地执行它。在脚本中，JQuery会监听 .sizeChk 类中是否有点击事件，如果它是真的，那么它会检查点击事件是否检查复选框与否。然后，如果选中该复选框，则会在选中的复选框中查找输入 .next()。

我使用了.next()，因为input位于右侧，如果input位于左侧，则可以使用.prev()。找到复选框旁边的输入后，它将应用.prop()。我没有使用.attr()，因为它已经过时了，JQuery自己没有鼓励。

你只需要保持班级的顺畅，你可以使用相同的类来复制任何其他复选框，以便在这些元素上获得相同的功能。

附注： 您最好在JQuery多读一遍。

与说明相符的旧答案。

＆＃13;

$(document).ready(function() {
  $('.sizeChk').click(function() {
    if ($(this).is(':checked')) {
      $(this).next("input").prop('disabled', false).focus();
    } else {
      $(this).next("input").prop('disabled', true);
    }
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chk1" class="sizeChk" />Small:
<input type="text" id="txt1" class="sizeTxt" disabled/><br><br>
<input type="checkbox" id="chk2" class="sizeChk" />Medium:
<input type="text" id="txt2" class="sizeTxt" disabled/><br><br>
<input type="checkbox" id="chk3" class="sizeChk" />Larg:
<input type="text" id="txt3" class="sizeTxt" disabled/><br><br>
<input type="checkbox" id="chk4" class="sizeChk" />xLarg:
<input type="text" id="txt4" class="sizeTxt" disabled/><br><br>
<input type="checkbox" id="chk5" class="sizeChk" />xxLarg:
<input type="text" id="txt5" class="sizeTxt" disabled/>

＆＃13;

新的更新代码

＆＃13;

$(document).ready(function() {
  $('.sizeChk').click(function() {
    if ($(this).is(':checked')) {
      $(this).closest('.sizeGroup').find('input[type=text]').prop('disabled', false).focus();
    } else {
      $(this).closest('.sizeGroup').find('input[type=text]').prop('disabled', true);
    }
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sizeGroup">
  <input type="checkbox" id="chk1" class="sizeChk" />Small:<br>
  <input type="text" id="txt1" class="sizeTxt" disabled/><br><br>
</div>
<div class="sizeGroup">
  <input type="checkbox" id="chk2" class="sizeChk" />Medium:<br>
  <input type="text" id="txt2" class="sizeTxt" disabled/><br><br>
</div>
<div class="sizeGroup">
  <input type="checkbox" id="chk3" class="sizeChk" />Larg:<br>
  <input type="text" id="txt3" class="sizeTxt" disabled/><br><br>
</div>
<div class="sizeGroup">
  <input type="checkbox" id="chk4" class="sizeChk" />xLarg:<br>
  <input type="text" id="txt4" class="sizeTxt" disabled/><br><br>
</div>

＆＃13;

希望得到这个帮助。

这是旧jsFiddle。

以下是更新后的jsFiddle

我想在点击复选框时禁用文本框。复选框是动态的

1 个答案: