ラジオボタンが選択されているときにドロップダウンのセットを検証するJquery/PHP

Question

私は6つのラジオボタンを持っています

XS | S | M | L | XL | XXL | | XXXL |カスタム

カスタムラジオボタンの下に私はドロップダウン（選択）ボックスのようなものがあります パンツウエスト|パンツヒップ|パンツフロント|パンツバック|パンツウエスト パンツウエスト 26 | 27 | 28 | 29 | 30 ....

ラジオボタンが選択されている場合はjQueryを有効にし、それ以外の場合はエラーメッセージを表示し、カスタムボタンが選択されている場合は、エラーメッセージが表示されない場合はすべてのドロップダウン（選択） 。

私はここで.single_add_to_cart_buttonのクリック機能に

jQuery(document).ready(function() { 
 
     jQuery('input[type="radio"]').click(function() { 
 
     if (jQuery(this).attr('id') == 'custom') { 
 
      jQuery('.custom-sizes').show('slow'); 
 
     } else { 
 
      jQuery('.custom-sizes').hide('slow'); 
 
     } 
 
     }); 
 
    
 
    }); 
 
    
 
    jQuery('.single_add_to_cart_button').click(function() { 
 
     if (jQuery('input[type="radio"]'.val() == 'custom').prop('checked')) 
 
    
 
     { 
 
     jQuery('.validate').each(function() { 
 
      if (jQuery(this).val() == 'select') { 
 
      jQuery('.customchecked-error').show(); 
 
      return false; 
 
      } else { 
 
      return true; 
 
      } 
 
    
 
     }); 
 
     } 
 
    
 
    });

.sizes { 
 
     margin: 20px auto; 
 
    } 
 
    
 
    .sizes input { 
 
     margin-right: 10px; 
 
    } 
 
    
 
    .sizes input[type=radio] { 
 
     display: none; 
 
     margin: 15px !important; 
 
     cursor: pointer !important; 
 
    } 
 
    
 
    .sizes input[type=radio] + label { 
 
     display: inline-block; 
 
     padding: 4px 12px; 
 
     background-color: #e7e7e7; 
 
     border-color: #ddd; 
 
     cursor: pointer !important; 
 
    } 
 
    
 
    .sizes input[type=radio]:checked + label { 
 
     background-image: none; 
 
     background-color: #000; 
 
     color: #fff; 
 
     transition: all 0.5s ease-out; 
 
     cursor: pointer !important; 
 
    } 
 
    
 
    .custom-sizes { 
 
     display: none; 
 
    } 
 
    
 
    .custom-sizes label { 
 
     font-size: 12px !important; 
 
     font-weight: 300 !important; 
 
    } 
 
    
 
    .custom-sizes .selections { 
 
     margin-bottom: 20px !important; 
 
    } 
 
    
 
    .custom-sizes select { 
 
     width: 100% !important; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
     <div class="sizes"> 
 
     <h4>Please Select a Size</h4> 
 
     <input class="checkcase" type="radio" id="xs" name="standard_size" value="xs"> 
 
     <label for="xs">XS</label> 
 
     <input class="checkcase" type="radio" id="s" name="standard_size" value="s"> 
 
     <label for="s">S</label> 
 
     <input class="checkcase" type="radio" id="m" name="standard_size" value="m"> 
 
     <label for="m">M</label> 
 
     <input class="checkcase" type="radio" id="l" name="standard_size" value="l"> 
 
     <label for="l">L</label> 
 
     <input class="checkcase" type="radio" id="xl" name="standard_size" value="xl"> 
 
     <label for="xl">XL</label> 
 
     <input class="checkcase" type="radio" id="xxl" name="standard_size" value="xxl"> 
 
     <label for="xxl">XXL</label> 
 
     <input class="checkcase" type="radio" id="xxxl" name="standard_size" value="xxxl"> 
 
     <label for="xxxl">XXXL</label> 
 
     <br> 
 
     <br> 
 
     <input class="checkcase" type="radio" id="custom" name="standard_size" value="custom"> 
 
     <label for="custom">Custom</label> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="custom-sizes"> 
 
     <p>Customize Your Look <a class="mpg-lightbox" href="/images/size-measure.jpg"><span> How to Measure</span></a></p> 
 
     <div class="custom-size-options"> 
 
     <div class="form-group"> 
 
      <div class="col-md-3 selections"> 
 
      <label>Waist<span class="show_required"> *</span></label> 
 
      <select class="pant_waist validate" name="pant_waist"> 
 
       <option value="select">Select</option> 
 
       <option value="24">24</option> 
 
       <option value="25">25</option> 
 
       <option value="26">26</option> 
 
      </select> 
 
      </div> 
 
      <div class="col-md-3 selections"> 
 
      <label>Hip<span class="show_required"> *</span></label> 
 
      <select class="pant_hip validate" name="pant_hip"> 
 
       <option value="select">Select</option> 
 
       <option value="30">30</option> 
 
       <option value="31">31</option> 
 
       <option value="32">32</option> 
 
      </select> 
 
      </div> 
 
      <div class="col-md-3 selections"> 
 
      <label>Front<span class="show_required"> *</span></label> 
 
      <select class="pant_front validate" name="pant_front"> 
 
       <option value="select">Select</option> 
 
       <option value="30">30</option> 
 
       <option value="31">31</option> 
 
       <option value="32">32</option> 
 
      </select> 
 
      </div> 
 
      <div class="col-md-3 selections"> 
 
      <label>Back<span class="show_required"> *</span></label> 
 
      <select class="pant_back validate" name="pant_back"> 
 
       <option value="select">Select</option> 
 
       <option value="30">30</option> 
 
       <option value="31">31</option> 
 
       <option value="32">32</option> 
 
      </select> 
 
      </div> 
 
      <div class="col-md-3 selections"> 
 
      <label>Inseam<span class="show_required"> *</span></label> 
 
      <select class="pant_inseam validate" name="pant_inseam"> 
 
       <option value="select">Select</option> 
 
       <option value="30">30</option> 
 
       <option value="31">31</option> 
 
       <option value="32">32</option> 
 
      </select> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 

をターゲットにする必要があり、したがってwoocommerceのためにこれを使用していますフィドルリンク https://jsfiddle.net/b5wrrj4h/

は助けに感謝されます！

Answer 1

代わりの

if (jQuery('input[type="radio"]'.val() == 'custom').prop('checked')) 

を使用してはそうのようなボタンのIDを使用します。ここでは

if (jQuery('#custom').prop('checked')) 

はアクションで、それのフィドルです：

https://jsfiddle.net/u0u86ug6/

編集：

他のチェックボックスのために検証するために

、そのようなあなたのコードにelseステートメントを追加します。迅速な対応のためのhttps://jsfiddle.net/hysxpjt8/