單擊兩個單選框和一個按鈕時顯示隱藏的文本框

Question

這是兩個單選按鈕和按鈕的HTML代碼

<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>

這是我到目前為止的腳本。 我讓它只使用單選按鈕，但是當我添加按鈕腳本時它停止工作。

<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>

我想要發生的是文本框僅在 id="small" 單選和 id="green" 單選和 id="cartbutton" 都被單擊時顯示。

此外，有沒有辦法讓文本框在滿足所有這些條件后保持可見，並且在進行其他選擇時不再隱藏？

Answer 1

這是用於有效性檢查的大量代碼

 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>

Answer 2

您可以按如下方式使用disabled屬性

 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>

單擊兩個單選框和一個按鈕時顯示隱藏的文本框

問題描述

2 個解決方案

解決方案1
0 已采納 2022-04-29 20:28:26

解決方案2
0 2022-04-29 20:32:07

單擊兩個單選框和一個按鈕時顯示隱藏的文本框

問題描述

2 個解決方案

解決方案1 0 已采納 2022-04-29 20:28:26

解決方案2 0 2022-04-29 20:32:07

解決方案1
0 已采納 2022-04-29 20:28:26

解決方案2
0 2022-04-29 20:32:07