How to use visible bindings with the parameter of the observed button?

Question

The correct radio button is selected when this page is displayed, but additional inputs should appear when the "sendemail" or "sms" switch values ​​are selected, right?

$(function () { var rbViewModel = { qrType: ko.observable('plaintext') }; ko.applyBindings(rbViewModel); }); 

Then my switches

 <input type="radio" name="txtType" value="plaintext" data-bind="checked: qrType" />Plaintext <input type="radio" name="txtType" value="sendemail" data-bind="checked: qrType" />Send E-mail <input type="radio" name="txtType" value="sms" data-bind="checked: qrType" />SMS 

And my inputs:

 <div data-bind="visible: qrType == 'sendemail'"><input type="text" id="txtEmailSubject" placeholder="E-mail subject" /></div> <div data-bind="visible: qrType == 'sendemail'"><input type="text" id="txtEmailBody" placeholder="E-mail body" /></div> <div data-bind="visible: qrType == 'sms'"><input type="text" id="txtSmsMsg" placeholder="SMS body" /></div> 

Is there something wrong with the attribute in the div elements? I thought that functions could be used in visible bindings for KnockoutJS documentation , for example:

 data-bind="visible: qrType=='sendemail'" 

Answer 1

When you use the observable in an expression in a data binding attribute, you need to reference it with ().

They should look like this: visible: qrType() === 'sendemail'