お問い合わせフォーム7 - どのように各チェックボックスをキャッチしてカスタマイズできますか？

Question

コンタクトフォーム7プラグインの各チェックボックスをキャッチしてカスタマイズするにはどうすればよいですか？

私は1つのフィールドにチェックボックスのリストを持っています。

私がしようとしているのは、各チェックボックスにjQueryを使用して属性と値を追加することです。このような

：

$("input['type=checkbox']:nth-child(3)").attr("data-price", 500).addClass("cf7-checkbox"); 

これは私のhtmlコードです：

<span class="wpcf7-form-control-wrap list-tosafot1"> 
    <span class="wpcf7-form-control wpcf7-checkbox" id="options1st"> 
     <span class="wpcf7-list-item first"> 
      <input type="checkbox" name="list-tosafot1[]" value="price-100" />&nbsp; 
      <span class="wpcf7-list-item-label">Checkbox1 - price 100</span> 
     </span> 
     <span class="wpcf7-list-item"> 
      <input type="checkbox" name="list-tosafot1[]" value="price-200" />&nbsp; 
      <span class="wpcf7-list-item-label">Checkbox2 - price 200</span> 
     </span> 
     <span class="wpcf7-list-item"> 
      <input type="checkbox" name="list-tosafot1[]" value="price-300" />&nbsp; 
      <span class="wpcf7-list-item-label">Checkbox3 - price 300</span> 
     </span> 
     <span class="wpcf7-list-item"> 
      <input type="checkbox" name="list-tosafot1[]" value="price-400" />&nbsp; 
      <span class="wpcf7-list-item-label">Checkbox4 - price 400</span> 
     </span> 
     <span class="wpcf7-list-item last"> 
      <input type="checkbox" name="list-tosafot1[]" value="price-500" />&nbsp; 
     <span class="wpcf7-list-item-label">Checkbox5 - price 500</span> 
     </span> 
    </span> 
</span> 

本当にありがとうございました!!!

Answer 1

入力要素が共有していないので、このセレクタが動作してはなりません同じ親。

$("input['type=checkbox']:nth-child(3)").attr("data-price", 500).addClass("cf7-checkbox"); 

は、だから私はこの解決策を見つけた：

$('.wpcf7-checkbox .wpcf7-list-item:nth-child(3) input').attr("data-price", 500).addClass("cf7-checkbox"); 

Answer 2

あなたがチェックボックスを選択しようとしている方法は、ここでは、おそらく間違っているすべてのチェックボックスをループへの道である：

var type = null; 
$("input").each(function() 
{ 
    type = $(this).attr("type"); 
    if(type == "checkbox") 
    { 
    $(this).attr("data-price", 500); 
    $(this).addClass("cf7-checkbox"); 
    } 
});