Aquí está el código HTML de los dos botones de radio y el botón
<body> <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1"> <label for="small"><span></span></label> <div class="label">Small</div> <input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2" > <label for="green"><span></span></label> <div class="label">Green</div> <button type="button" class="cart-btn" id="cartbutton" name="cart" value="5">Add To Cart!</button> <div id="itemdv" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea"></div> </body>Aquí está el guión que tengo hasta ahora. Conseguí que funcionara solo con los botones de opción, pero cuando agregué la secuencia de comandos del botón, dejó de funcionar.
<script> const sizeSelector = 'input:radio[name=size]'; const colorSelector = 'input:radio[name=color]'; const cartSelector = 'button[name=cart]'; $(function () { // We can add the click event to all radio buttons by linking // their selectors with commans. $(`${sizeSelector}, ${colorSelector}, ${cartSelector}`).click(() => { toggleWhenSmallAndGreenAndCartButton(); }); }); const SMALL = 20; const GREEN = 0; const CARTBUTTON = 5; function toggleWhenSmallAndGreenAndCartButton(){ let size = $(`${sizeSelector}:checked`).val(); let color = $(`${colorSelector}:checked`).val(); let cart = $(`${cartSelector}:checked`).val(); $('#itemdv').toggle(size == SMALL && color == GREEN && cart == CARTBUTTON) && $('#itemdv2').toggle(size == SMALL && color == GREEN && cart == CARTBUTTON); } </script>Lo que quiero que suceda es que el cuadro de texto se muestre solo cuando se haga clic en la radio id="pequeña" Y la radio id="verde" Y el botón id="cartbutton".
Además, ¿hay alguna forma de que el cuadro de texto permanezca visible después de que se cumplan todas estas condiciones y no se vuelva a ocultar si se realiza otra selección?
Eso es mucho código para una verificación de validez.
const sizeSelector = 'input:radio[name=size]'; const colorSelector = 'input:radio[name=color]'; const cartSelector = 'button[name=cart]'; $(function() { $(`${cartSelector}`).click(() => { validityCheck(); }); }); const SMALL = 20; const GREEN = 0; const CARTBUTTON = 5; function validityCheck() { let $size = $(`${sizeSelector}`); let $color = $(`${colorSelector}`); let size_flag = $size.is(':checked'); let color_flag = $color.is(':checked'); $('#itemdv').toggle(size_flag && color_flag); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1"> <label for="small"><span></span></label> <div class="label">Small</div> <input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2"> <label for="green"><span></span></label> <div class="label">Green</div> <button type="button" class="cart-btn" id="cartbutton" name="cart" value="5">Add To Cart!</button> <div id="itemdv" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea"></div> </body>Podría usar el atributo disabled de la siguiente manera
document.getElementById("small").addEventListener("click", function(){ document.getElementById("green").removeAttribute("disabled");}); document.getElementById("green").addEventListener("click", function(){ document.getElementById("cartbutton").removeAttribute("disabled");}); document.getElementById("cartbutton").addEventListener("click", function(){ document.getElementById("itemdv").style.display = "block";}); <body> <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1"> <label for="small"><span></span></label> <div class="label">Small</div> <input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2" disabled="true" > <label for="green"><span></span></label> <div class="label">Green</div> <button type="button" class="cart-btn" id="cartbutton" name="cart" value="5" disabled="true">Add To Cart!</button> <div id="itemdv" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea" ></div> </body>