サポート » 使い方全般 » ラジオボタンのラベルをJQueryで変更したい

  • 解決済 d.w.c

    (@dwc-1)


    ACFプラグインを使用してメールフォームを作成しました。
    英語版の切り替え時に表示テキスト部分のみの変更をしたいのでJQueryでのテキストの書き換え方法を調べて試したのですが、ラジオボタンのラベルの書き換えがうまくいきません。

    /*php*/
    
    /*プルダウン*/
    <div class="acf-field acf-field-select acf-field-フィールドナンバーA" data-name="form-age" data-type="select" data-key="field_フィールドナンバーA">
    	<div class="acf-label">
    		<label for="acf-field_フィールドナンバーA">年齢</label>
    	</div>
    	<div class="acf-input">
    		<select id="acf-field_フィールドナンバーA" class="" name="acf[field_フィールドナンバーA]" data-ui="0" data-ajax="0" data-multiple="0" data-placeholder="Select" data-allow_null="1">
    		<option value="" selected="selected" data-i="0">- Select -</option>
    		<option value="10代">10代</option>
    		<option value="20代">20代</option>
    		<option value="30代">30代</option>
    		</select>
    	</div>
    </div>
    
    /*ラジオボタン*/
    <div class="acf-field acf-field-radio acf-field-フィールドナンバーB" data-name="form-sex" data-type="radio" data-key="field_フィールドナンバーB">
    	<div class="acf-label">
    		<label for="acf-field_フィールドナンバーB">性別</label>
    	</div>
    	<div class="acf-input">
    		<input name="acf[field_フィールドナンバーB]" type="hidden">
    		<ul class="acf-radio-list acf-bl" data-allow_null="1" data-other_choice="1">
    			<li class="odd"><label><input type="radio" id="acf-field_フィールドナンバーB" name="acf[field_フィールドナンバーB]" value="男性">男性</label></li>
    			<li class="even"><label><input type="radio" id="acf-field_フィールドナンバーB-女性" name="acf[field_フィールドナンバーB]" value="女性">女性</label></li>
    			<li class="odd"><label><input type="radio" id="acf-field_フィールドナンバーB-other" name="acf[field_フィールドナンバーB]" value="other"></label>
    			<input type="text" name="acf[field_フィールドナンバーB]" value="" disabled="disabled" class="acf-disabled"><label></label></li>
    		</ul>
    	</div>
    </div>
    /*JQuery*/
    
    <script type="text/javascript">
    jQuery(function (jQuery) {
    /*プルダウン*/
      jQuery('.acf-field-フィールドナンバーA div.acf-label label').text("Age");
      jQuery('.acf-field-フィールドナンバーA div.acf-input select#acf-field_フィールドナンバーA').children('option[value="10代"]').text("Under 19 years old");
      jQuery('.acf-field-フィールドナンバーA div.acf-input select#acf-field_フィールドナンバーA').children('option[value="20代"]').text("20 to 29 years old");
      jQuery('.acf-field-フィールドナンバーA div.acf-input select#acf-field_フィールドナンバーA').children('option[value="30代"]').text("30 to 39 years old");
      
    /*ラジオボタン*/
      jQuery('.acf-field-フィールドナンバーB div.acf-label label').text("Sex");
      jQuery('.acf-field-フィールドナンバーB div.acf-input .acf-radio-list li:nth-child(1) label').html("Male");
      jQuery('.acf-field-フィールドナンバーB div.acf-input .acf-radio-list li:nth-child(2) label').html("Female");
      });
    </script>

    上記のように.text("")で書き換えると<label>内の<input>もテキストに上書きされてしまうのでそもそも選択できなくなってしまいます。
    値の変更方法は出てくるんですが、ラベルの変え方がよくわからず…アドバイスを頂けると幸いです。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック投稿者 d.w.c

    (@dwc-1)

    .html()を使用し、<input>も書き換え部分に追加したらできました。
    あまりスマートには見えませんが…

      jQuery('.acf-field-フィールドナンバーB div.acf-input .acf-radio-list li:nth-child(1) label').html('<input type="radio" id="acf-field_フィールドナンバーB" name="acf[field_フィールドナンバーB]" value="男性">Male');
      jQuery('.acf-field-フィールドナンバーB div.acf-input .acf-radio-list li:nth-child(2) label').html('<input type="radio" id="acf-field_フィールドナンバーB-女性" name="acf[field_フィールドナンバーB]" value="女性">Female');
1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「ラジオボタンのラベルをJQueryで変更したい」には新たに返信することはできません。