How to disable checkbox in certain column Ember js?

239 Views Asked by At

**enter image description here** May I know how can I disable the rest of the checkbox except for step 2,3 and 4? Those checkbox are link from the checkbox component. And i link the checkbox component into route at columns propertyName:"active". Below is a part of the route code.

export default Route.extend({
    model() {
        let results = {
            workflow: {
                columns: [
                    {
                        "propertyName": "step",
                        "title": "Step",
                        editable: false
                    },
                    {
                        "propertyName": "workflowName",
                        "title": "Workflow Name",
                    },
                    {
                        "propertyName": "preferredName",
                        "title": "Your Company Preferred Name",
                    },
                    {
                        "propertyName": "active",
                        "title": "Active",
                        component: "adk-workflow-select-row",
                        editable: false
                    },
                    {
                        title: "Edit",
                        component: "edit-row",
                        editable: false
                    }],
                rows: [
                    {
                        step: '0',
                        workflowName: 'New',
                        preferredName: '新',
                    },
                    {
                        step: '1',
                        workflowName: 'Budget Approval',
                        preferredName: '预算批准',
                    },
                    {
                        step: '2',
                        workflowName: 'Creative',
                        preferredName: '创作的',
                    },
                    {
                        step: '3',
                        workflowName: 'Visualize',
                        preferredName: '想象',
                    },
                    {
                        step: '4',
                        workflowName: 'Implementation',
                        preferredName: '履行',
                    },
                    {
                        step: '5',
                        workflowName: 'In Play',
                        preferredName: '活性',
                    },
                    {
                        step: '6',
                        workflowName: 'Completed',
                        preferredName: '已完成',
                    },
                    {
                        step: '7',
                        workflowName: 'Canceled',
                        preferredName: '取消',
                    },
                ]
            },

This is the adk-workflow-select-row which is the checkbox component. The code below is how i render the checkbox at. This enable all the checkbox. But i only need step 2,3 and 4 checkbox to be enable.

{{#paper-checkbox value=isSelected onChange=(action "clickOnRow" index record)}}{{/paper-checkbox}}
1

There are 1 best solutions below

0
Lux On

Your questions is a bit hard to answer because you dont show the relevant template code.

Generally you somehow call your your checkbox in your template, and you can just wrap this in an {{#if. Your code is very generic, but I just guess this could be in your edit-row component. So like this:

{{#if some condition}}
  {{#paper-checkbox value=isSelected onChange=(action "clickOnRow" index record)}}{{/paper-checkbox}}
{{/if}}

Now the important question is what condition to use. And this kind of depends on what exactly you want. How do you want to configure it? Do you want to keep a global array somehow saying which steps have the checkbox in your rows like this?

{
  step: '2',
  workflowName: 'Creative',
  preferredName: '创作的',
  showCheckbox: true,
},

Depending on this what you want could be something like this:

{{#if record.showCheckbox}}
  {{#paper-checkbox value=isSelected onChange=(action "clickOnRow" index record)}}{{/paper-checkbox}}
{{/if}}

generally if you're new to ember I can just strongly recommend you to first try to learn how things work in a less generic situation. A generic solution like you have can be awesome, but soon become very complex.