Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Disabling specific radio options #551

Closed
Anoesj opened this issue Nov 30, 2018 · 5 comments
Closed

Disabling specific radio options #551

Anoesj opened this issue Nov 30, 2018 · 5 comments
Labels
difficulty: easy enhancement

Comments

@Anoesj
Copy link

Anoesj commented Nov 30, 2018 •
edited
Loading

I'm submitting a feature request.

I ran into some behavior I didn't expect in radios fields. It seems logical that setting disabled: true on a single option would result in disabled="disabled" on that particular option. However, options are only disabled when the whole radios field is disabled. I looked at fieldRadios.vue and to me it seems like the most simple solution would be to change this:

<template lang="pug">
	.radio-list(:disabled="disabled", v-attributes="'wrapper'")
		label(v-for="item in items", :class="{'is-checked': isItemChecked(item)}", v-attributes="'label'")
			input(:id="getFieldID(schema)", type="radio", :disabled="disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)", :class="schema.fieldClasses", :required="schema.required", v-attributes="'input'")
			| {{ getItemName(item) }}

into this:

<template lang="pug">
	.radio-list(:disabled="disabled", v-attributes="'wrapper'")
		label(v-for="item in items", :class="{'is-checked': isItemChecked(item), 'is-disabled': disabled || item.disabled}", v-attributes="'label'")
			input(:id="getFieldID(schema)", type="radio", :disabled="disabled || item.disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)", :class="schema.fieldClasses", :required="schema.required", v-attributes="'input'")
			| {{ getItemName(item) }}

This makes sure that a radio option is disabled whenever its parent is disabled entirely and whenever that particular option is disabled itself.

Example (expected behavior after option label):
https://jsfiddle.net/Anoesj/qd8fv430/

Version: 2.3.2
@zoul0813 zoul0813 mentioned this issue Dec 10, 2018
Merged
3 tasks
@zoul0813
Copy link
Member

@Anoesj does PR #556 fulfill this request? I've implemented it to support boolean values for "item.disabled" as well as a function that is passed a reference to the model, so you can perform some business logic based on other values.

For example:

{
    type: "radios",
    label: "Best car in the world",
    model: "bestCar",
    values: [
        {
            name: "BMW M3 (expected: enabled)",
            value: "bmw"
        },
        {
            name: "Fiat Multipla (expected: disabled)",
            value: "fiat",
            disabled: true
        },
        {
            name: "Porsche 911 (expected: enabled)",
            value: "porsche",
            disabled: (model) => {
                if(model.bestCar === "bmw") return false;
                return true;
            }
        }
    ]
},

@Anoesj
Copy link
Author

Anoesj commented Dec 11, 2018

@zoul0813 Absolutely, great work! I was hoping this would arrive in v3, but this is even better :-)

@Anoesj
Copy link
Author

Anoesj commented Dec 17, 2018

@zoul0813 One minor improvement would be adding a class "is-disabled" to labels belonging to disabled radio inputs. This allows for easy radio styling. For example, right now, we can't put opacity: 0.4 on the label text when the radio input is disabled.

@zoul0813 zoul0813 reopened this Dec 17, 2018
@zoul0813
Copy link
Member

Sounds like a good request - I’ll see what I can do, PR’s welcome.

I’d suggest using a more generic class like “disabled” ...

@Anoesj
Copy link
Author

Anoesj commented Dec 17, 2018

I'll see if I can make some time to work on this, little bit busy though. I would still go for "is-disabled" since "is-checked" is already being used.

zoul0813 added a commit to zoul0813/vue-form-generator that referenced this issue Dec 20, 2018
@zoul0813
vue-generators#551 - added "is-disabled" class to the radios label
1e9db8e
@zoul0813 zoul0813 mentioned this issue Dec 20, 2018
Merged
zoul0813 added a commit that referenced this issue Dec 21, 2018
@zoul0813
Merge pull request #570 from zoul0813/feature/551-add-is-disabled-class
9f4c72a 
#551 - added "is-disabled" class to the radios label
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
difficulty: easy enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zoul0813 @Anoesj