Динамически заменить флажок / текст радио-метки

Question

Мне было интересно, есть ли какой-нибудь способ динамически изменить текст радио-метки. И, возможно, оберните текст метки в тег <span>, чтобы я мог его дополнительно стилизовать.

У меня есть следующий переключатель html:

<div class="radio-select" data-value="books-taxonomy">
   <input class="radio-input" type="radio" id="form-books-tax" name="bundle" value="books-taxonomy" checked="checked">
   <label class="radio-label" for="form-books-tax">CHANGE THIS LABEL TEXT</label>
</div>

Это идет непосредственно из плагина и, к сожалению, я не могу просто отредактировать html этого файла.

Есть ли способ добиться этого? В том числе Jquery решение?

Answer 1

Не переносите div на span, вместо этого используйте другой div, вы можете использовать wrap(), также вы можете заменить label текст следующим образом:

$('.radio-select').wrap('<div class="container"></div>').find('label').text('bingo!').attr('data', 'books-taxonomy');

.container {
  background: #5eba7d;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio-select" data-value="books-taxonomy">
  <input class="radio-input" type="radio" id="form-books-tax" name="bundle" value="books-taxonomy" checked="checked">
  <label class="radio-label" for="form-books-tax">CHANGE THIS LABEL TEXT</label>
</div>

---

Редактировать: Если вы хотите обернуть text внутри label, вы можете использовать wrapInner() :

$('.radio-select label').wrapInner('<span></span>').text('bingo!')

Редактировать 2: Также на основании вашего комментария вы можете сделать то, что вы попробовали:

 $('label[for=form-books-tax]').wrapInner('<span></span>').text('bingo!');

Answer 2

Вы можете изменить точное имя ярлыка на основе атрибута for в ярлыке. Вот решение, предоставленное. При необходимости вы можете заменить атрибут for для замены Dynami c.

Вопрос:

<div class="radio-select" data-value="books-taxonomy">
   <input class="radio-input" type="radio" id="form-books-tax" name="bundle" value="books-taxonomy" checked="checked">
   <label class="radio-label" for="form-books-tax">CHANGE THIS LABEL TEXT</label>
</div>

O / P:

$(document).ready(function(){
  $('#form-books-tax').next('label').attr("for", 'form-books-tax').text('Replace Your New Name Here');
});