我如何擁有一個禁用的復選框，當用戶選中該復選框時該復選框變為活動狀態？

Question

我要完成的工作

如何在匯率的最終金額上方放置一個復選框“自定義匯率”，並禁用輸入字段。 然后，如果用戶選中該復選框，則該字段將變為活動狀態，並且他可以更改該值。 我可以通過API獲取實時匯率嗎？ 如果用戶輸入自己的匯率，那么我需要什么JavaScript代碼才能正常工作？

我正在嘗試復制此https://i.stack.imgur.com/PQawZ.png

剛敲定

我如何插入一個最初被禁用的復選框，但是如果用戶單擊該復選框，則該復選框對所有用戶都變為活動狀態，以將他們自己的匯率輸入到他們選擇的貨幣的貨幣轉換器中？

我需要什么JavaScript來使匯率從API實際更改為他們自己的用戶自定義匯率？

我的貨幣換算程序為JSFIDDLE 。

程序/站點代碼如下

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

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 個解決方案

解決方案1
1 已采納 2017-05-20 14:54:05

我如何擁有一個禁用的復選框，當用戶選中該復選框時該復選框變為活動狀態？

問題描述

1 個解決方案

解決方案1 1 已采納 2017-05-20 14:54:05

解決方案1
1 已采納 2017-05-20 14:54:05