JSFiddle - React, Tailwind, and code Playground

by mrnobody

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>

        <div class="clear"></div>
    </div>
    <input type="hidden" class="pname" value="Картина-панно &quot;Скрипачка, контрабасист, саксофонист&quot; на натуральном камне оникс">
    <input type="hidden" name="option" value="com_virtuemart">
    <input type="hidden" name="view" value="cart">
    <noscript>&lt;input type="hidden" name="task" value="add"/&gt;</noscript>
    <input type="hidden" name="virtuemart_product_id[]" value="3513">
</form>
<form method="post" class="product js-recalculate" action="/antilopa/kartiny">
    <div class="product-fields">
        <div class="product-field product-field-type-S">	<span...

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 (event) {
        var $elSelect = $(this).parent().prev().find('.baget_select');
        
        if ($elSelect.length > 0) {
            console.log($(".baget_select option:selected").text())
            if ($('option:selected', $elSelect).text() == 'Выберите багет') {
                alert('Выберите тип багета!');
            }
        }
    });

});