Disabling specific radio options

[Anoesj]

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]

@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]

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

[Anoesj]

@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]

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]

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.