我想单击复选框禁用文本框。复选框是动态的

Question

<script> 
    $(function() { 
     $("input:checkbox").click(function() { 
      if ($(this).is(":checked")) { 
       var id = $(this).attr('id'); 
       if (id) { 
        $("#txtPassportNumber").removeAttr("disabled"); 
        $("#txtPassportNumber").focus(); 
       } 
      } else { 
       $("#txtPassportNumber").attr("disabled", "disabled"); 
      } 
     }); 
    }); 
</script> 

这是我的jQuery代码我得到这个

<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++; 
} 
?> 

使我没有得到文本框的ID一个文本框，即使我给

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

我有5尺寸和每个尺寸我想添加数量，当我点击S我想启用它的文本框，当我点击M它的文本框必须启用。我得到一个文本框启用大小S onclick，因为它没有把我的ID there.Help我 为此

Answer 1

您要求解决选择问题，所以这里是一个小的'JQuery'代码。

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

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

因此，我在代码中所做的工作就是将侦听器从ID移动到类中，这样可以更轻松地释放ID，让您可以随心所欲地执行任何操作。在脚本中，JQuery用于侦听类是否存在点击事件，如果它为true，则检查点击事件是否检查复选框。然后，如果选中该复选框，则它会查找输入.next()复选框。

我使用了.next()，因为input在右边，如果input在左边，您可以使用.prev()。在复选框旁边找到输入后，它将应用.prop()。我没有使用.attr()，因为它是旧的，并且不受JQuery自我鼓励。

你只需要保持这个类的完整性，你可以使用相同的类到任何其他复选框来获得这些元素相同的功能。

一个侧面说明：这是最好的，你就JQuery多一点阅读起来。

较旧的答案与描述相匹配。

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

<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/>

新更新的代码

$(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); 
 
    } 
 
    }); 
 
})

<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>

希望这有助于。

这是旧的jsFiddle。

这里是后更新jsFiddle