javachによってforeachで生成された入力に一意のIDを追加します

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のことでyの挿入入力し、確認のチェックボックスで変数を使用し、未チェック

例：

これが唯一の明確化である、私は増分値++iを使用してJS でそれを作る方法を知っているに追加されません。 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') ; 
}); 

の属性を変更するには、元のIDにインクリメント変数を追加した後、全体のIDを使用します。

を

• #checkbox_sub_1確認するとき - チェックすると>#sub_min_points_1disabled属性は

• #checkbox_sub_2に削除されます - チェックするとき>#sub_min_points_2disabled属性は

• #checkbox_sub_3に削除されます - >#sub_min_points_3disabled属性が削除されます*

Answer 1

これを行うには要素IDは必要ありません。 「これら要素のn番目の 1がクリックされた場合、対応するのn番目の 1それら要素を更新」と言うJSを書き込むことが可能です。

次

は、クリックされたチェックボックスのインデックスを把握するためにjQueryの .index() methodを利用して、それを行うための一つの方法である、と .eq() methodは、対応するテキスト入力を選択します。クリックイベントハンドラ内では、 thisはクリックされた要素を参照します。ところで、jQueryコードは質問本体に表示されているので、質問に「jQuery」タグがないのにjQueryが正常であると仮定しています。

質問に表示されているforeach()は、チェックボックスとテキスト入力をすべてチェックボックスではなくチェックボックスとテキスト入力を最初に出力し、次に「生成されたIDの例」の質問に示すようにすべてのテキスト入力を出力します。次のデモ私はペアでそれらを持っているHTMLを使用しました。しかし、（同じく）それぞれの相対的な位置を使用して更新するものを決定するので、すべてのチェックボックスを最初にすべてのテキスト入力に続けていれば、同じJSも同様に機能します。さておき、あなたは無効と.prop("disabled", true)（またはfalse）のフィールドを有効にする必要がありますよう

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>

、.removeAttr()と.attr()を使用しないでください。

：前の例で示したHTMLのために働くだろう

2番目のオプションは、チェックボックスがクリックされたときに、関連したテキスト入力は文字通りDOM内の次の要素であるので、単純に、DOMナビゲーション.next() methodを使用することです

$('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

私は私

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

で動作するようにそのように編集するために必要な上記のコードをプラグインICheckを使用していますので、