CODEWITHSUNDEEP
jquery
DragonBorn
DragonBorn

Reputation: 1809

How to make the select tags unselectable or hidden

How do I make my Adult and Child select tags to become unselectable or hidden when the value in my input is 0. Also how do I stop my input value to become less than zero when I click on the '-' button.

$(function(){
  var p = 2500;
  $('#add').click(function(){
    value = $("#rooms").val();
    price = $("#price").val();
    priceInt = parseInt(price);
    value++;
    price = priceInt + p; 
    $("#rooms").val(value);
    $('#price').val(price);
  });
  $('#minus').click(function(){
    value = $("#rooms").val();
    price = $("#price").val();
    priceInt = parseInt(price);
    value--;
    price = priceInt - p;
    $("#rooms").val(value);
    $('#price').val(price);
  });
  var adult = $( "#selectAdult option:selected" ).text();
  adultInt = parseInt(adult);
  price = $("#price").val();
});
<html>
  <body>
    <input type = "button" id="minus" value="-">
    <input type="text" id="rooms" value="1">
    <input type = "button" id="add" value="+">
    Adult: <select id="selectAdult">
      <option>1</option>
      <option selected="selected">2</option>
      <option>3</option>
    </select>
    Child: <select>
      <option>0</option>
      <option selected="seelcted">1</option>
      <option>2</option>
    </select>
    Total: <input type="text" id="price" value="2500">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

Upvotes: 0

Views: 96

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

Hope this is what you are looking for.

  • On - click, first ask if the value is above 0. Then allow it to go 1 down in value. Then ask if the new value is 0, if so then disable select box.
  • On + click, Ask if the value is above 0, if so then enable select box

$(function() {
  var p = 2500;
  $('#add').click(function() {
    value = $("#rooms").val();
    price = $("#price").val();
    priceInt = parseInt(price);
    value++;
    price = priceInt + p;
    $("#rooms").val(value);
    $('#price').val(price);
    if (value > 0) {
      $('#selectAdult, #selectChild').prop('disabled', false);
    }
  });
  $('#minus').click(function() {
    value = $("#rooms").val();
    if (value > 0) {
      price = $("#price").val();
      priceInt = parseInt(price);
      value--;
      price = priceInt - p;
      $("#rooms").val(value);
      $('#price').val(price);
    }
    if (value == 0) {
      $('#selectAdult, #selectChild').prop('disabled', 'disabled');
    }
  });
  var adult = $("#selectAdult option:selected").text();
  adultInt = parseInt(adult);
  price = $("#price").val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <input type="button" id="minus" value="-">
  <input type="text" id="rooms" value="1" readonly="readonly">
  <input type="button" id="add" value="+"> Adult: <select id="selectAdult">
      <option>1</option>
      <option selected="selected">2</option>
      <option>3</option>
    </select> Child: <select id="selectChild">
      <option>0</option>
      <option selected="seelcted"> 1</option>
      <option>2</option>
    </select> Total: <input type="text" id="price" value="2500">
</body>

</html>

Upvotes: 2

Related Questions