surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.21k stars 815 forks source link

Checkbox - The `isExlusive` property for Checkbox Items #4778

Open JaneSjs opened 2 years ago

JaneSjs commented 2 years ago

Posted by @SamMousa at https://github.com/surveyjs/survey-library/issues/4764

isExclusive This option would implement logic similar to the option added by hasNone (and could replace its functionality). There are use cases for multiple exclusive options and this also allows the user to program the value for the option.

JaneSjs commented 2 years ago

Hi @SamMousa, Thank you for your suggestion. While we don't have immediate plans to introduce such an option, you may wish to handle this usage scenario using the survey.onValueChanged function.

For example, introduce a custom isExclusive:boolean property and check/uncheck Checkbox items based depending on whether a user selects an isExclusive item. Consider this sample code:

Survey.Serializer.addProperty(
  "itemvalue", {
    name: "isExclusive:boolean",
    default: false,
    category: "general"
  }
);
var json = {
  "elements": [
    {
      "type": "checkbox",
      "name": "car",
      "title": "What car are you driving?",
      "isRequired": true,
      "hasNone": false,
      "colCount": 2,
      "choices": [
        { "text" : "Ford", "value" : "Ford"},
        { "text" : "Vauxhall", "value" : "Vauxhall"},
        { "text" : "Volkswagen (exclusive)", "value" : "Volkswagen", "isExclusive" : "true"},
        { "text" : "Nissan", "value" : "Nissan"},
        { "text" : "Audi (exclusive)", "value" : "Audi", "isExclusive" : "true"}
      ]
    }
  ]
};
...
survey.onValueChanged.add((sender, options) => { 
  const q = options.question;
  if(!q || q.getType() != "checkbox") return;
  let lastSelectedItem = q.selectedItems.pop();
  if (Survey.Helpers.isTwoValueEquals(lastSelectedItem.value, q.prevValue)) return;
  if(!!lastSelectedItem.isExclusive){
    if (Survey.Helpers.isTwoValueEquals(lastSelectedItem.value, q.prevExclusiveValue)) return;
    q.prevExclusiveValue = lastSelectedItem.value;
    q.value = lastSelectedItem.value;
  }
  if(!lastSelectedItem.isExclusive) {
    if(!!q.prevExclusiveValue){
      q.prevExclusiveValue = null;
      q.value = lastSelectedItem.value;
    }
  } 
  q.prevValue = options.value.slice(); 
});

Check this sample. Please let me know if this option works for you.

For the record: we've also discussed a similar issue at Unchecked other choices when I select special item (checkbox).

SamMousa commented 2 years ago

Should this not remain open if it is not yet implemented?

JaneSjs commented 2 years ago

Hello @SamMousa, Thank you for your comment. Yes, sure, I reopened this issue and put it to our backlog. Thank you for your valuable suggestions.

P.S. If you like our products, please take a moment to share your experience with our company by contributing a short review for SurveyJS at g2.com or at Trustpilot.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.

SamMousa commented 1 year ago

If I have a developer work on implementing this would you review (and if you approve the code quality) and add this feature?

SamMousa commented 8 months ago

This is still an issue for us (and our users). The current work arounds require custom JS which is not realistic for end users.

SamMousa commented 8 months ago

This can be closed since you went the route of yet more special choices over a generic solution: https://github.com/surveyjs/survey-library/issues/7754