JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<form method="post" class="product js-recalculate" action="/antilopa/kartiny">
<div class="product-fields">
<div class="product-field product-field-type-S">
<span class="product-fields-title-wrapper">
<span class="product-fields-title"><strong>Тип багета</strong></span>
</span>
<span class="product-field-display">
<select name="customPrice[0][10]" required="" class="baget_select">
<option disabled="">Выберите багет</option>
<option value="5788">темный</option><option value="5789">светлый</option> </select>
</span>
<span class="product-field-desc"></span>
</div>
</div>
<div class="addtocart-bar">
<span class="quantity-box">
<input type="text" class="quantity-input js-recalculate" name="quantity" value="1">
</span>
<span class="quantity-controls js-recalculate">
<input type="button" class="quantity-controls quantity-plus">
<input type="button" class="quantity-controls quantity-minus">
</span>
<span class="addtocart-button with_baget">
<input type="submit" name="addtocart" class="addtocart-button" value="Добавить в корзину" title="Добавить в корзину" disabled>
</span>
<span class="addtocart-button with_baget">
<input type="submit" name="addtocart" class="addtocart-button" value="Добавить в корзину" title="Добавить в корзину" disabled>
</span>
<div class="clear"></div>
</div>
<input type="hidden" class="pname" value="Картина-панно "Скрипачка, контрабасист, саксофонист" на натуральном камне оникс">
<input type="hidden" name="option" value="com_virtuemart">
<input type="hidden" name="view" value="cart">
<noscript><input type="hidden" name="task" value="add"/></noscript>
<input type="hidden"...
JavaScript
jQuery(function($) {
function imageBagetSelect(){
if( String(window.location).indexOf("-detail") > 0 ){
if( $('.bagetImg').length ) {
$('.bagetImg').remove();
}
if($(".baget_select option:selected").text()=="темный"){
$( '.addtocart-area .product-field-type-S').after( '<img class="bagetImg" src="/images/banners/dark_baget.jpg" alt="Тёмный багет" title="Тёмный багет" />' );
} else if ($(".baget_select option:selected").text()=="светлый"){
$( '.addtocart-area .product-field-type-S').after( '<img class="bagetImg" src="/images/banners/light_baget.jpg" alt="Светлый багет" title="Светлый багет" />' );
}
}
var elements = $('span.addtocart-button');
var button = 0;
for(var i=0; i<elements.length; i++) {
var selection = $(elements[i]).parent().prev().find('.baget_select option:selected');
if (selection.length > 0 ){
button = $(elements[i]).find('input.addtocart-button');
if(selection.text()=='Выберите багет'){
$(button).prop("disabled", true);
} else {
$(button).prop("disabled", false);
}
}
}
}
imageBagetSelect();
$('.baget_select').on('change', function(){
imageBagetSelect();
});
$('span.addtocart-button').on('click', function(){
if($(this).parent().prev().find('.baget_select').length > 0){
if($(".baget_select option:selected").text()=='Выберите багет'){
alert('Выберите тип багета!');
}
}
});
});