將唯一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) 
}) 

工作