Question

我在我的页面上动态创建了复选框，并为每个复选框分配了一个唯一的ID，如'renameteam1'，'renameteam2'等。我正在尝试运行一个函数，当其中一个被检查时。然后，该功能将允许用户输入先前只读的相应字段。

我尝试了以下但是它似乎没有用。

var a=0;
$('input[type=checkbox]').change(function () {
for (var i=0;i<rows3;i++){
     a=a+1;
     var id= '#renameteam'+a;
if ($(id).is(":checked")) {
    $('#newname'+a).removeProp('readonly');
  }
 }
//Here do the stuff you want to do when 'unchecked'
});

任何建议？

Answer 1

我就是这样做的

//delegate the event so you can call this on document ready and it will still be bound to any dynamically created elements
$(document).on('change', 'input[type=checkbox]', function() {
  var checkbox = $(this),
    otherInput = $('#' + checkbox.data('id'));

  otherInput.prop('readonly', !checkbox.is(':checked'));

  if (!checkbox.is(':checked')) {
      // do stuff here when checkbox isn't checked - not sure if you still want this bit but it is as per your comments in the code above
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" value="" id="renameteam1" data-id="newname1" />
<!-- use a data attribute to target the id of the input you want to make readonly -->

<input type="textbox" name="textbox" value="" id="newname1" readonly />

如果您不想使用数据属性，可以执行以下操作：

//delegate the event so you can call this on document ready and it will still be bound to any dynamically created elements
$(document).on('change', 'input[type=checkbox]', function() {
  var checkbox = $(this),
    otherInput = $('#newname' + this.id.replace('renameteam', ''));

  otherInput.prop('readonly', !checkbox.is(':checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" value="" id="renameteam1" />
<!-- use a data attribute to target the id of the input you want to make readonly -->

<input type="textbox" name="textbox" value="" id="newname1" readonly />

Answer 2

尝试使用on on而不是更改复选框和单选按钮。

在我的页面上更改复选框后运行功能

2 个答案: