Question

我想要完成的事情

如何设置一个复选框，说明＆＃34;自定义汇率＆＃34;高于交换率的最终金额并禁用输入字段。然后，如果用户选中该复选框，则该字段变为活动状态，并且他可以更改该值。我可以通过API获取实时汇率吗？如果用户输入自己的汇率，我需要哪些javascript代码才能使用？

我试图复制这个https://i.stack.imgur.com/PQawZ.png

刚刚完成

如何插入最初被禁用的复选框，但如果用户点击该复选框，则所有用户都会激活该复选框，以便将自己的汇率输入到所选货币的货币转换器中？

我需要什么样的javascript来实际从API转换为自己的用户自定义汇率？

JSFIDDLE我的货币转换程序。

以下的计划/网站代码

＆＃13;

// 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();
   })

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

首先将此代码添加到您的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>

然后你需要做的是检查是否选中了该框，然后启用另一个框，当它更改其值时，将其添加到选项中。请看下面的代码

的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;
});

如何在用户选择时禁用已禁用的复选框？

1 个答案: