How to select any two checkbox and disable the remaining checkbox

[former_member739563]

Hi,
In ui5 I am using the checkbox but I am not getting any Idea how to make any two checkbox selected after that remaining checkboxes needs to be made disable.If any of the checkbox again Unchecked all the checkbox should be enable

[davidgbarbero · Accepted solution]

You will need to keep track of the number of options selected. You can do this with a local/global JSON model.

Let's build first a JSON model with the checkbox properties (text and selected properties):

var oCheckboxProperties = {
	"checkboxes": [
		{
			"selected": false,
			"text" : "Option 1"
		},
		{
			"selected": false,
			"text" : "Option 2"
		},
		{
			"selected": false,
			"text" : "Option 3"
		},
		{
			"selected": false,
			"text" : "Option 4"
		},
		{
			"selected": false,
			"text" : "Option 5"
		},
		{
			"selected": false,
			"text" : "Option 6"
		},
	]
}


this._checkboxModel = new sap.ui.model.json.JSONModel(oCheckboxProperties);
this.getView().setModel(this._checkboxModel, "checkboxModel");<br>

This model mocks an Odata service which gives us the needed properties (very important the selected property, since we will use ift afterwards).

And we will need a second JSON model which will contain 2 properties:

• iCheckboxesSelected --> number of checkboxes selected
• bCheckboxesEnabled --> boolean for setting true or false the checkbox "enabled" property

This second model would look like this:

var oViewElemProperties = {};

oViewElemProperties.iCheckboxesSelected = 0;
oViewElemProperties.bCheckboxesEnabled = true;

this._oViewProperties = new sap.ui.model.json.JSONModel(oViewElemProperties);
this.getView().setModel(this._oViewProperties, "viewProperties");

These two models will be initialized in the onInit method of your controller.

Now we add everything to the xml view:

<Page id="page" title="{i18n>title}">
	<Panel content="{checkboxModel>/checkboxes}">
		<CheckBox text="{checkboxModel>text}" selected="{checkboxModel>selected}" enabled="{= ${checkboxModel>selected} || ${viewProperties>/bCheckboxesEnabled}}" select="onCheckboxSelected"/>
	</Panel>
</Page>

I added everything inside a Panel in order to build dynamically all the checkboxes.

As the last part we need to implement the method onCheckboxSelected from the select event of the checkbox, which will do something similar to the following:

onCheckboxSelected: function(oEvent){
	var bSelected = oEvent.getParameter("selected");
	var iCheckboxesSelected = this._oViewProperties.getProperty("/iCheckboxesSelected");
	if(bSelected){
		iCheckboxesSelected++
	}else{
		iCheckboxesSelected--
	}
	if(iCheckboxesSelected === 2){
		this._oViewProperties.setProperty("/bCheckboxesEnabled", false);
	}else{
		this._oViewProperties.setProperty("/bCheckboxesEnabled", true);
	}
	this._oViewProperties.setProperty("/iCheckboxesSelected", iCheckboxesSelected);
}

This way you will keep track of the checkboxes selected, and whenever the number of checkboxes selected is 2, the rest of unselected checkboxes will be disabled. When deselecting a selected checkbox everything will go back to normal.

You can check the following plunker:

Plunker - Checkbox example (plnkr.co)

Hope it helps you.