CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap-3
Liam Docherty
Liam Docherty

Reputation: 31

How can I have a disabled checkbox which becomes active when a user selects it?

What I'm trying to accomplish

How can I place a checkbox saying "Custom exchange rate" above the final amount of the exchanged rate and disable the input field. Then if a user checks the checkbox the field becomes active and he can change the value. Would it be possible to do this with me fetching the live exchange rates fro an API? If the user inputs their own exchange rate what javascript code would I need for this to work?

I'm trying to replicate this https://i.sstatic.net/PQawZ.png

Just to finalise

How can I insert a checkbox which is disabled at first but if a user clicks on it the checkbox becomes active to all the user to input their own exchange rate into the currency converter for they chosen currencies?

What javascript would I need for the exchange rate to actually change from the API to their own user custom exchange rate?

JSFIDDLE of my currency converter program.

PROGRAM/SITE CODE BELOW

// Fetch exchange rate data from api
   $.getJSON("https://api.fixer.io/latest?base=ZAR", function(data) {
       var currencies = [];
       $.each(data.rates, function(currency, rate) {
           // Currency options dropdown menu
           currencies.push("<option id='" + currency.toLowerCase() + "' value='" + rate + "' >" + currency + "</option>");
       });
       $(".currency-list").append(currencies);
   })

   //Calculate and output the new amount
   function exchangeCurrency() {
       var amount = $(".amount").val();
       var rateFrom = $(".currency-list")[0].value;
       var rateTo = $(".currency-list")[1].value;
       if ((amount - 0) != amount || (''+amount).trim().length == 0) {
           $(".results").html("0");
           $(".error").show()
       } else {
           $(".error").hide()
           if (amount == undefined || rateFrom == "--Select--" || rateTo == "--Select--") {
               $(".results").html("0");

           } else {
               $(".results").html((amount * (rateTo * (1 / rateFrom))).toFixed(2));
           }
       }
   }

   $('.logo-small').on('click', function () {
       var toValue = $('.to').find(':selected').val();
       var toText =  $('.to').find(':selected').text();

       var fromValue = $('.from').find(':selected').val();
       var fromText =  $('.from').find(':selected').text();

       $('.from').find(':selected').val(toValue);
       $('.from').find(':selected').text(toText);

       $('.to').find(':selected').val(fromValue);
       $('.to').find(':selected').text(fromText);
       exchangeCurrency();
   })
html {
         font-size: 20px;
         }
         .error {
           background: red;
           padding: 10px 15px;
           color: white;
           display: none;
         }
         .panel {
         background: #333333;
         border: solid white;
         }
         .results {
         font-size: 1em;
         color: #FFFFFF;
         }
         .dropdown {
         margin-bottom: 50px;
         }
         .inline-block {
         display: inline-block;
         }
         .center {
         width: 90%;
         margin: 0 auto 30px;
         }
<!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <!-- Custom CSS -->
      <link href="styling.css" rel="stylesheet">
      <!-- Javascript -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
<body>
      <div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary text-center">
                <div class="panel-heading">
                    <h4 class="panel-title">Currency Converter</h4>
                </div>
                <div class="error">
                    Please enter numeric value
                </div>
                <div class="panel-body">
                    <form class="form-vertical">

                        <div class="form-group center">
                            <label for="">Enter Value:</label>
                            <input type="number" class="amount form-control" placeholder="Enter value" min="1">
                        </div>


                        <div class="row">
                            <div class="col-sm-12" style="text-align: center">
                                    <span class="glyphicon glyphicon-transfer logo-small"></span>
                            </div>
                            <div class="form-group inline-block">
                                <label for="">From currency:</label>
                                <select class="currency-list form-control from" onclick="exchangeCurrency()">
                                    <option>--Select--</option>
                                </select>
                            </div>

                            <div class="form-group inline-block">
                                <label>To currency:</label>
                                <select class="currency-list form-control to" onclick="exchangeCurrency()">
                                    <option>--Select--</option>
                                </select>
                            </div>
                        </div>
                    </form>
                    <p class="results">0</p>
                </div>
            </div>
        </div>
    </div>
</div>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
      <script src="program.js"></script>

Upvotes: 0

Views: 80

Answers (1)

alessandrio
alessandrio

Reputation: 4370

First add this code to your htlm

<div class="form-group center">
  <div class="checkbox">
    <label><input type="checkbox" value="" id="customchecked">Custom Currency:</label>
  </div>
  <input type="number" class="amount form-control" placeholder="Enter Custom Currency" id="inputcustom" disabled>
</div>

And then what you have to do is check if the box is checked and then enable the other and when it changes its value add it to the options. Look at the code below

jQuery

$("#customchecked").change(function(){
  if($(this).is(":checked")){
    $("#inputcustom").prop("disabled", false);
  } else {
    $("#inputcustom").prop("disabled", true);
  }
});
var count = 0;
$("#inputcustom").change(function(){
  $(".currency-list").append("<option id='cc"+count+"' value='"+$(this).val()+"'>CC"+count+"</option>");
  count += 1;
});

Upvotes: 1

Related Questions