отключить jquery datepicker с помощью переключателя knckoutjs

Question

Опция радио в моей заявке возвращает три значения: allday, morning and halfday. Как я могу связать свой jquery datepicker так, чтобы он включался только тогда, когда выбрано allday.

var viewModel = function() { 
    this.holidayType = ko.observable(); 
    this.allday = ko.computed(
     { 
      read: function() { 
       return this.holidayType() == "allday"; 
      }, 
      write: function (value) { 
       if (value) 
        this.holidayType("allday"); 
      } 
     }, this); 
    this.morning = ko.computed(
    { 
    read: function() { 
     return this.holidayType() == "morning"; 
    }, 
    write: function (value) { 
     if (value) 
      this.holidayType("morning"); 
    } 
    }, this); 
    this.afternoon = ko.computed(
    { 
     read: function() { 
     return this.holidayType() == "afternoon"; 
    }, 
    write: function (value) { 
    if (value) 
     this.holidayType("afternoon"); 
    } 
    }, this); 
}; 
ko.applyBindings(new viewModel()); 

$(function() { 
    $("#e1").daterangepicker({ 
     datepickerOptions: { 
      minDate: 0 
     } 
    }); 
}); 

Answer 1

Во-первых, я добавил наблюдаемым имени dateRangeButton к вашему ViewModel. Это наблюдаемое проведут селектор JQuery, чтобы динамически генерироваться <button>, который создается с помощью захватывающего диапазона дат плагина:

this.dateRangeButton = ko.observable(); 

Затем я добавил функцию к ViewModel под названием enableDisableDateRange. При вызове этой функции будет добавить или удалить атрибут disabled к кнопке захватывающего диапазона дат, основываясь на равных или нет holidayType «AllDay»:

this.enableDisableDateRange = function(context) { 
    context.dateRangeButton().prop('disabled', context.holidayType() != 'allday'); 
} 

Как мы получаем селектор для кнопки захватывающего диапазона дат? Я создал пользовательские привязки, которые будут применяться сборщиком диапазона дат для элемента и заполнение dateRangeButton наблюдаемого в ViewModel:

ko.bindingHandlers.datePicker = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     // apply the date range picker 
     $(element).daterangepicker({ 
      datepickerOptions: { 
       minDate: 0 
      } 
     }); 
     // tell the viewmodel where the date range picker button is 
     bindingContext.$data.dateRangeButton($(element).next('button')); 
     // enable or disable the button 
     bindingContext.$data.enableDisableDateRange(bindingContext.$data); 
    } 
}; 

я добавил это связывание с <input> элемента, который будет содержать сборщик диапазона дат:

<input id="e1" name="e1" data-bind="datePicker: ''"> 

Наконец, я добавил subscribe к holidayType наблюдаемым, который будет вызывать функцию enableDisableDateRange любое время holidayType изменения:

this.holidayType.subscribe(function() { 
    this.enableDisableDateRange(this); 
}, this); 

Вот скрипка: http://jsfiddle.net/6cfb1dLg/

ПРИМЕЧАНИЯ: Это все зависит от того, как сборщика диапазон дат устраивает это UI. В настоящее время он создает элемент <button> непосредственно после элемента <input>, к которому он применяется. Если это изменится, то необходимо изменить и пользовательскую привязку datePicker, которую я написал. Пользовательская привязка также предполагает наличие наблюдаемого имени dateRangeButton, а функция вида enableDisableDateRange существует в пределах viewmodel.