将唯一ID添加到用foreach生成的输入javascript

Question

我想附加唯一的ID来输入。

这是我输入：生成的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> 
} 

例子：

<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

---

我的想法的澄清：

作出dynamicall唯一ID Ÿ插入输入通过的foreach，然后使用该变量的复选框选中和未选中

例子：

这只是澄清，我不知道如何使用增值++i使它在JS 并追加到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选中时 - 选中后>#sub_min_points_1disabled属性将被移除

• #checkbox_sub_2 - 选中后>#sub_min_points_2disabled属性将被移除

• #checkbox_sub_3 - >#sub_min_points_3disabled属性将被移除*

Answer 1

你不需要元素ID来做到这一点，因为它可以编写JS，说：“被点击的这些元件第n一个时，更新相应的第n一个那些元素”。

以下是一种方法，利用jQuery的.index() method来确定点击复选框的索引，并使用.eq() method来选择相应的文本输入。请注意，在点击事件处理程序中，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

由于我使用的I检查插件需要像要被编辑上面的代码跟我

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

工作