Inquirer.js
Inquirer.js copied to clipboard
SBoudrias
Checkboxes disable other choices based on selection
Itd be nice to have the choices in a checkbox be able to be disabled if one of the choices is checked.
choices:
- [ ] I am not disabled
- [ ] only I can be checked
- I am now disabled - disabled
- [x] only I can be checked
more friendly i think than checking both boxes and then the validation fails and they have to go uncheck one of them
But, how about separating this in two different set of checkbox? Or using a simple list.
use case i have is for generator-angular:
Please select which modules you could like:
[] Angular Animation
[] Angular Cookies
[] Angular Router (select this or UI Router)
[] UI Router (select this or Angular Router)
[] Angular Storage
I could break out the router selection but its an extra action the user has to perform. It'd be nice if they could do it in one go but if its too hard to do or does seem user-unfriendly then I'll go with two prompts. @addyosmani thoughts on UI-nice-ness?
This would be great. It would help keep prompts as brief as possible (no unnecessary sub-options prompts needed).
$("#yes").on("click", function () {
var yesDocket = document.getElementById('no');
yesDocket.checked = false;
});
$("#no").on("click", function () {
var noDocket = document.getElementById('yes');
noDocket.checked = false;
});
It seems that this issue needs a more UX Design approach ("How to make the prompts more user friendly?") than a strictly programmatic answer. I agree with the options provided by @SBoudrias. If you have a prompt where you only need to select one answer, and disable all the others, then use list or rawlist type. By the time you have to choose more than one answers, you go for checkboxes. But what happens when you have to conditionally choose items from a list?
Let's try to find a solution for the generator-angular use case:
First we have to understand that it's a good design decision to create prompts that serve only one purpose. This is called Grouping, to divide a list of items based on a reason which makes sense in the context of the use case.
In your example, we can extract the options "Angular Router" and "UI Router" into a separate prompt. Both items relates with routing, where all the other serve more abstract choices (do not relate with each other). By doing this we achieve the following results:
- Increase the usability (effectiveness, efficiency and satisfaction) of the design.
- Conforms to Don’t Make Me Think principle: People don’t like to puzzle over how to do things. The human mind needs more time to interpret texts that contain conditions (click this or do not click the other) which, especially in large scale, frustrate us. Consider a list with 50 choices and 20 conditionals.
- Conforms to Don’t waste my time principle: More thinking = more time to interpret messages = more time to take action = more frustration [citation needed].
This explanation does not relate only for this specific use case. You can argue that the list is small, but what will happen if implement this feature? Someone can be tempted and use this conditional-chose-list for everything. It's not an unrealistic example as we have seen in many aspects of our lives as programmers that users prefer the simple, easy, sometimes dreadful choice, to save them some time.
By not implementing this feature, the user will necessarily go for two lists, which is the optimal UX. You see, even if the user cannot extract the reasoning I have already described, he still will make the right decision by grouping items in distinct lists.
@eddiemonge have you understand the explanation? Does anyone else wants to say anything? If we are done, then @SBoudrias you can close this issue.
I found this solution, that works for me, maybe for someone else
choices: (answers)=> { return [ {name:'DTOs', value: 'dto'}, {name:'DB', value: 'sql', disabled: answers.generateFrom == 'db'} ]
