Knockoutjs 检查绑定函数调用问题

Question

我正在尝试在复选框被选中时调用函数并相应地设置字段值。复选框和地址字段如下所示

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

但是当复选框是checked/unchecked时，这个函数根本不会被调用

我试过设置断点，但功能不对。这个 JS 世界的新手，非常感谢任何帮助

Answer 1

嘿，我给你做了一个小片段来告诉你它在使用可观察和检查绑定时工作得很好，当复选框被选中时，它是“真”，否则它是“假”

要自定义设置其他输入的 .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" >

Knockoutjs 检查绑定函数调用问题

Knockoutjs checked binding function call issue

javascript

jquery

razor

knockout.js