Hidding and showing divs based on radial button choice

Hidding and showing divs based on radial button choice

Hello,

Quick question please.

If I have 2 radial buttons

  1. <div class="form-group">
  2.      <div class="radio">
  3.         <label for="stock">
  4.             <input type="radio" id="stock_disabled" name="stock" value="stock_disabled" checked><b>Disable</b> Stock Feature for this product
  5.             <br>
  6.             <input type="radio" id="stock_enabled" name="stock" value="stock_enabled"><b>Enable</b> Stock Feature for this product
  7.       </label>
  8. </div>
  9. </div>

and an input field which I want to hide when the radial button  value="stock_disabled"   is chosen but show when  value="stock_enabled" is selected.

I have done this code at the moment but cannot get it working

this is the hidden field

  1. <div class="form-group" style="visibility: hidden;" id="show_stock" >
  2.     <label for="product_stock">Current Stock</label>
  3.     <input name="product_stock" type="text" placeholder="" class="form-control input-md">
  4.     <span class="help-block">You can ""disable"" this feature if you wish by adding </span>
  5. </div>

And this is the jquery code:

  2. <script>
  3. $(document).ready(function(){
  4. $('#stock_disabled').on('change', function() {
  5. if ( this.value == 'stock_disabled')
  6. {
  7. $("#show_stock").show();
  8. }
  9. else
  10. {
  11. $("#show_stock").hide();
  12. }
  13. }).change();
  14. });
  15. </script>
Any idea what am I doing there please as the field is constantly hidden whatever I click.

Thank you!