Last week as part of an interface redesign, I had to revamp a user search screen. One of the first functionality which I had to incorporate was a dynamic toggle feature between a dropdown list and checkbox using Knockout.
Use Case Scenario
The UI has a drop-down with 2 values – Invoice Number and Subscriber Code.
- If the user selects ‘Invoice Number’ in the drop-down, then a text-box is displayed where the user can type an invoice number.
- If the user selects ‘Subscriber Code’ in the drop-down, then a drop-down is displayed with pre-populated fields for the user to choose from.
You can check out the below JSFiddle I created for this functionality —