Question

我不知道如何正确引用我的代码以使用复选框禁用文本。

<form method='POST'>
<?php

$index = 0 ; 
while($index <= 4){
    echo "<input class='click' type='text' data-text='test$index' id='text$index' value='text$index' disabled>test$index</input><br>";
    echo "<input type='checkbox' id='test$index' >test$index</input><br><br>";
    $index++;
}

?>
</form>

上面我有一个循环复选框和文本框

以下是我的jQuery代码

$(document).ready(function() {

    var id = $(this).attr('id');

    $('#'+id).change(function(){
        var disable = $(this).attr('data-text');
        if(('#'+disable).prop('checked')){
            $('#'+disable).removeAttr('disabled');
        }
        else{
            $('#'+disable).attr('disabled');
        }   
    });

});

下面的

是通过堆栈片段的实时演示

$(document).ready(function() {

  $('.click').change(function() {
    var disable = $(this).attr('data-text');
    if (('#' + disable).prop('checked')) {
      $('#' + disable).prop('disabled', false);
    } else {
      $('#' + disable).prop('disabled', true);
    }

  });

});

<form method='POST'>
  <input class='click' type='text' data-text='test0' id='text0' value='text0' disabled>test0</input>
  <br>
  <input type='checkbox' id='test0'>test0</input>
  <br>
  <br>
  <input class='click' type='text' data-text='test1' id='text1' value='text1' disabled>test1</input>
  <br>
  <input type='checkbox' id='test1'>test1</input>
  <br>
  <br>
  <input class='click' type='text' data-text='test2' id='text2' value='text2' disabled>test2</input>
  <br>
  <input type='checkbox' id='test2'>test2</input>
  <br>
  <br>
  <input class='click' type='text' data-text='test3' id='text3' value='text3' disabled>test3</input>
  <br>
  <input type='checkbox' id='test3'>test3</input>
  <br>
  <br>
  <input class='click' type='text' data-text='test4' id='text4' value='text4' disabled>test4</input>
  <br>
  <input type='checkbox' id='test4'>test4</input>
  <br>
  <br>
</form>

Answer 1

根据HTML 4 specification：

ID和NAME令牌必须以字母（[A-Za-z]）开头，可能是后跟任意数量的字母，数字（[0-9]），连字符（＆＃34; - ＆＃34;），下划线（＆＃34; _＆＃34;），冒号（＆＃34;：＆＃34;）和句号（＆＃34;。＆＃34;）。

您的元素ID似乎在这里是数字：

echo "<input type='checkbox' id='test$index' >

另外，正如@charlietfl指出的那样，您的ID是重复的，因为它是您的文本输入和复选框的值：

echo "<input class='click' type='text' data-text='test$index' id='text$index' value='text$index' disabled>test$index</input><br>";
echo "<input type='checkbox' id='test$index' >test$index</input><br><br>";

以下选择器未找到您的输入：

$('#'+disable).prop('disabled', true);

Answer 2

更简单的方法，不使用ID并使用prev（）和基于checked的简单布尔切换

$(':checkbox').change(function(){
   $(this).prev().prop('disabled', this.checked);      
});

Answer 3

试试这个：我希望我已经解决了你的问题，这里是完整的代码

</html>
<form method='POST'>
<?php
$index = 0 ; 
while($index <= 4){
    echo "<input  type='text'  id='text$index' value='text$index' >test$index</input><br>";
    echo "<input  class='click'  id='test$index' data-text='$index' type='checkbox'  >test$index</input><br><br>";
    $index++;
}
?>
</form>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
        $('.click').click(function(){
    var disable = $(this).attr('data-text');
 if ("#"+disable.change ){
       $("#text"+disable).attr("disabled",  $(this).is(':checked')); 
        }
});
});
</script>

如何禁用循环内的文本框？

3 个答案: