Смена метки на переключателе

Question

У меня есть следующий код (который динамически создается Magento), и мне нужно выделить метку переключателя, которая была выбрана.

Как бы я поступил об этом? Я попытался использовать скрипт замены изображения для самой кнопки-переключателя, которая запускается с помощью Mootools, но это конфликтует с prototype.js в ядре magento.

Все, что мне нужно, - это возможность изменить выделение на ярлыке выбранного параметра, поэтому добавьте рамку и т. Д. К выбранному ярлыку.

Может ли кто-нибудь указать мне правильное направление?

<div class="product-options-title">
  <dt>
    <label class="required"> <em>*</em> Edge Details</label>
  </dt>
</div>
<div class="product-options-chooser">
  <dd class="options-last">
    <div class="input-box">
      <ul id="options-3318-list" class="options-list">
        <li>
          <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onClick="opConfig.reloadPrice()" name="options[3318]" id="options_3318_2" value="548258"  price="0" />
          <span class="label">
          <label for="options_3318_2">
          <img src="http://www.justkitchens.co/media/doors/zurfiz/zurfiz_ultragloss_black_matching.jpg" />
          <div class="edge-option">Matching</div>
          </label>
          </span><script type="text/javascript">$('options_3318_2').advaiceContainer = 'options-3318-container';$('options_3318_2').callbackFunction = 'validateOptionsCallback';</script></li>
        <li>
          <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onClick="opConfig.reloadPrice()" name="options[3318]" id="options_3318_3" value="548259"  price="0" />
          <span class="label">
          <label for="options_3318_3">
          <img src="http://www.justkitchens.co/media/doors/zurfiz/zurfiz_ultragloss_black_brushed_steel.jpg" />
          <div class="edge-option">Stainless Steel Effect</div>
          </label>
          </span><script type="text/javascript">$('options_3318_3').advaiceContainer = 'options-3318-container';$('options_3318_3').callbackFunction = 'validateOptionsCallback';</script></li>
        <li>
          <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onClick="opConfig.reloadPrice()" name="options[3318]" id="options_3318_4" value="548260"  price="0" />
          <span class="label">
          <label for="options_3318_4">
          <img src="http://www.justkitchens.co/media/doors/zurfiz/zurfiz_ultragloss_black_glass.jpg" />
          <div class="edge-option">Glass Effect</div>
          </label>
          </span><script type="text/javascript">$('options_3318_4').advaiceContainer = 'options-3318-container';$('options_3318_4').callbackFunction = 'validateOptionsCallback';</script></li>
      </ul>
      <span id="options-3318-container"></span> </div>
  </dd>
</div>

Answer 1

Вы можете сделать (я использую вживую, так как контент генерируется):

$('input:radio').live('click', function(){
   if($(this).is(':checked')){
       $(this).next('span').addClass('border');
   }else{
       $(this).next('span').removeClass('border')
   }
});

и затем определить класс CSS:

label.border{

  border: 1px solid red;
}