Question

我有一个包含多个字段的表单。以下是示例：

<input id="txtContactFirstName" name="txtContactFirstName" maxlength="20" class="k-textbox standardInput" required="required" data-bind="value: appointmentDetails.ContactFirstName" />
<input id="txtContactPhone" name="txtContactPhone"  data-role="maskedtextbox" data-mask="(999)-000-0000" class="k-textbox phoneInput" required="required" data-bind="value: appointmentDetails.ContactPhone" />

我也在表单上有一个复选框。

<label id="lblPatientDetailsSameAsPatient"><input id="patientDetailsSameAsPatientCheckBox" type="checkbox" data-bind="checked: intakeSettings.sameAsPatient" name ="PatientDetailsSameAsPatientCheckBox" />Same as Patient</label>

当我点击复选框时，我希望数据绑定值更改为其他值。所以基本上我将从patient.Details.FirstName中的patientDetails.FirstName和txtContactPhone中提取txtContactFirstName的数据？如何在单击时实现此目的并将数据绑定值分配给txtContactFirstName和txtContactPhone？

$("#patientDetailsSameAsPatientCheckBox").click(function (e) {
        if (e.target) {

           ?? Logic goes here which will assign data-bind values to txtContactFirstName  and txtContactPhone ?

        }
    });

Answer 1

您可以使用jQuery方法data访问HTML元素的数据属性，并设置值。另外，我认为你不需要那里的if (e.target) {逻辑。

$("#patientDetailsSameAsPatientCheckBox").click(function (e) {

        $("#txtContactFirstName").data("bind",patientDetails.FirstName);
        $("#txtContactPhone").data("bind",patientDetails.Phone);

});

以下是与data方法相关的文档：http://api.jquery.com/data/

Answer 2

使用change的{{1}}事件，如下所示。 这假设您在checkbox属性中具有实际值。您可以使用data-bind代替that.checked ? $(this).data('bind') : ''来优化代码，以便在取消选中复选框时删除值。：

＆＃13;

$(this).data('bind')

＆＃13;

$(function() {
    $('#patientDetailsSameAsPatientCheckBox').on('change', function() {
        var that = this;
        $(':text').val(function() {
            return that.checked ? $(this).data('bind') : '';
        });
    });
});

＆＃13;

Answer 3

我会通过在你的表单所绑定的observable上添加一个change事件处理程序来实现。如果更改的字段是intakeSettings.sameAsPatient，则设置txtContactFirstName和txtContactPhone绑定的observable的属性。

// What your form is bound to
var viewModel = new kendo.observable({
  patient: {
    FirstName: 'Ted',
    Phone: '123-456-7890'
  },
  appointmentDetails: {
    ContactFirstName: '',
    ContactPhone: ''
  },
  intakeSettings: {
    sameAsPatient: false
  }
});

viewModel.bind('change', function(e) {
  // e.field is the property that changed, e.sender is the observable
  if(e.field === 'intakeSettings.sameAsPatient') {
    if(e.sender.get(e.field) === true) {
      e.sender.set('appointmentDetails.ContactFirstName', e.sender.patient.FirstName);
      e.sender.set('appointmentDetails.ContactPhone', e.sender.patient.Phone);
    }
    else {
      e.sender.set('appointmentDetails.ContactFirstName', '');
      e.sender.set('appointmentDetails.ContactPhone', '');
    }
  }
});

这样你就可以通过javascript保持与表单紧密耦合。

jQuery：如何更改click事件的数据绑定？

3 个答案: