[英]Knockoutjs checked binding function call issue
我试图在复选框被选中时调用一个函数并相应地设置字段值。 复选框和地址字段如下所示
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="SameAsShippingAddress" value="SameAsShippingAddress" data-bind="checked: sameAsShippingAddress" />
<label>Check this box if Shipping Address and Billing Address are the same.</label>
</div>
<div class="row">
<div class="col-md-6">
<h4>Shipping Address:</h4>
<div class="form-group required">
<label for="EmailCompetitor" class="control-label">Email:</label>
<input type="email" maxlength="150" id="EmailCompetitor" name="EmailCompetitor" class="form-control" data-bind="value: emailCompetitor" required />
</div>
<div class="form-group required">
<label for="FirstNameCompetitor" class="control-label">First Name:</label>
<input type="text" maxlength="150" id="FirstNameCompetitor" name="FirstNameCompetitor" class="form-control" data-bind="value: firstNameCompetitor" required />
</div>
</div>
<div class="col-md-6">
<h4>Billing Address:</h4>
<div class="form-group required">
<label for="EmailCompetitor_Billing" class="control-label">Email:</label>
<input type="email" maxlength="150" id="EmailCompetitor_Billing" name="EmailCompetitor_Billing" class="form-control" data-bind="value: emailCompetitor_Billing" required />
</div>
<div class="form-group required">
<label for="FirstNameCompetitor_Billing" class="control-label">First Name:</label>
<input type="text" maxlength="150" id="FirstNameCompetitor_Billing" name="FirstNameCompetitor_Billing" class="form-control" data-bind="value: firstNameCompetitor_Billing" required />
</div>
</div>
我希望单独捕获复选框布尔值以及在选中复选框时需要调用该函数。 所以在js中我喜欢
var orderRequestFormViewModel = function () {
var self = this;
self.currentPage = ko.observable(1);
self.referringPage = ko.observable();
...............
self.sameAsShippingAddress = ko.observable().extend({ required: false });
..........
self.sameAsShippingAddress = function () {
if (this.checked) {
$("#EmailCompetitor_Billing").val($("#EmailCompetitor").val());
$("#FirstNameCompetitor_Billing").val($("#FirstNameCompetitor").val());
} else {
$("#EmailCompetitor_Billing").val("");
$("#FirstNameCompetitor_Billing").val("");
}
}
但是当复选框被选中/取消选中时,这个函数根本没有被调用
我尝试放置断点,但功能不是它。 这个 JS 世界的新手,非常感谢任何帮助
嘿,我给你做了一个小片段,向你展示它在使用可观察和检查绑定时工作得非常好,当复选框被选中时,它是“真”如果不是“假”
要使其他输入的设置 .val() 等自定义内容只需使用计算函数,只要 isChecked 更改,就会调用它
var model = function () { var self = this; self.isChecked = ko.observable(false); self.doStuffWhenChecked = ko.computed(function(){ if(self.isChecked()){ $('#textinput').val("whatever"); }else{ $('#textinput').val(""); } },this); } var vm = new model(); ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <label>Check this: </label> <input type="checkbox" data-bind="checked: isChecked"> <span data-bind="visible: isChecked()"> Only show when checked </span> <input type="text" id="textinput" >
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.