Question

我想在输入中添加唯一ID。

这是我的意见：

foreach( $subItems AS $item ) {
    <input type="checkbox" id="checkbox_sub" class=" flat"name="sub_elements[]" required="required">                                                                            

    <input type="text" id="sub_min_points" name="sub_min_points[]" disabled> 
}

生成的ID示例：

<input type="checkbox" id="checkbox_sub_id1" class=" flat"name="sub_elements[]" required="required">
<input type="checkbox" id="checkbox_sub_id2" class=" flat"name="sub_elements[]" required="required">
<input type="checkbox" id="checkbox_sub_id3" class=" flat"name="sub_elements[]" required="required">
<input type="checkbox" id="checkbox_sub_id4" class=" flat"name="sub_elements[]" required="required">
<input type="text" id="sub_min_points_id1" name="sub_min_points[]" disabled>
<input type="text" id="sub_min_points_id2" name="sub_min_points[]" disabled>
<input type="text" id="sub_min_points_id3" name="sub_min_points[]" disabled>
<input type="text" id="sub_min_points_id4" name="sub_min_points[]" disabled>

然后，如果选中该复选框，我想启用输入。

我使用此代码在检查后启用输入但问题是它只在第一个输入中起作用，因为生成的输入没有唯一的ID

$('#checkbox_sub').on('ifChecked', function(event){
    $('#sub_min_points').removeAttr('disabled');
});
$('#checkbox_sub').on('ifUnchecked', function(event){
    $( '#sub_min_points_' ).attr( "disabled" , 'disabled') ;
});

上面的代码包含此插件Icheck

中的方法

澄清我的想法：

通过foreach为动态插入的输入创建唯一ID，然后使用复选框中的变量选中并取消选中

示例：

这只是澄清，我不知道如何在JS中制作它使用增量值++i并附加到id=""并在将增量变量附加到原始ID后使用整个id来更改所有

的属性

$('#checkbox_sub+i+').on('ifChecked', function(event){
    $('#sub_min_points+i+').removeAttr('disabled');
});
$('#checkbox_sub+i+').on('ifUnchecked', function(event){
    $( '#sub_min_points+i+' ).attr( "disabled" , 'disabled') ;
});

我需要的是什么：

#checkbox_sub_1 - ＆gt; #sub_min_points_1 disabled属性将被删除
#checkbox_sub_2 - ＆gt; #sub_min_points_2 disabled属性将被删除
#checkbox_sub_3 - ＆gt; #sub_min_points_3 disabled属性将被删除*

Answer 1

您不需要元素ID来执行此操作，因为可以编写JS“当 nth 这些元素之一被单击时，更新对应的 nth 那些元素之一“。

以下是一种方法，使用jQuery的.index() method来计算所单击复选框的索引，并使用.eq() method来选择相应的文本输入。请注意，在click事件处理程序中，this引用了单击的元素。顺便说一句，我假设jQuery没问题，即使问题没有“jQuery”标签，因为问题体中显示了jQuery代码。

请注意，问题中显示的foreach()将成对输出复选框和文本输入，而不是首先输出所有复选框，然后输出所有文本输入，如“生成的ID示例”中的问题所示，所以在下面的演示中我使用了成对的HTML。但是，如果您确实拥有所有复选框，然后是所有文本输入，那么同样的JS也可以正常工作，因为（再次）它使用每个复选框的相对位置来决定更新哪一个。

var cbs = $('input[name="sub_elements[]"]')
var inputs = $('input[name="sub_min_points[]"]')

cbs.on('click', function() {
  inputs.eq(cbs.index(this)).prop('disabled', !this.checked)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>

另外，您应该停用并启用.prop("disabled", true)（或false）字段，不要使用.removeAttr()和.attr()。

对前面示例中显示的HTML有用的第二个选项是简单地使用DOM导航.next() method，因为当单击复选框时，关联的文本输入实际上是DOM中的下一个元素：

$('input[name="sub_elements[]"]').on('click', function() {
  $(this).next().prop('disabled', !this.checked)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>

Answer 2

由于我正在使用ICheck插件，因此上述代码需要进行编辑才能与我合作

var cbs = $('input[name="sub_elements[]"]') ;
var inputs = $('input[name="sub_min_points[]"]') ;
cbs.on('ifChecked',  function(event) {
    inputs.eq(cbs.index(this)).prop('disabled', false)
})

cbs.on('ifUnchecked',  function(event) {
    inputs.eq(cbs.index(this)).prop('disabled', true)
})

通过javascript为foreach生成的输入添加唯一ID

2 个答案: