KnockoutJS data-bind="Visible :" with two conditions is not working

Question

A simple thing I am trying to workout with KnockoutJS.

I have two dropdowns and a textbox.

What I need

If both the dropdowns are selected, then only I should get the checkbox displayed. Otherwise, the text input should not visible.

What I tried:

Here is my fiddle: https://jsfiddle.net/vikash208/z4x5meua/13/

I used something like this:

data-bind="visible: selectedValue && selectedControl"

From the above, the conditions are verified as below:

IF selectedValue IS TRUE AND selectedControl IS NOT UNDEFINED

Kindly provide me a solution and also where I went wrong with it. I am a beginner of knockoutJS

Answer 1

When you use multiple conditions in a binding, you need to unwrap the observables so the entire expression can be evaluated.

To do this, just add brackets after the observable:

<input type="text" class="form-control" data-bind="visible: selectedValue() && selectedControl()" />

JSFiddle

You could also create another computed observable with your condition in it (note, you still unwrap the observables in the computed observable). This is probably the better option since it keeps the logic in your view model and can be reused.

Txt.showCondition = ko.computed(function() {
    return this.selectedItem() && this.selectedValue()
}, this);

Then just bind the input to this instead:

<input type="text" class="form-control" data-bind="visible: showCondition" />

JSFiddle