isDisabled

isDisabled(node) returns true for elements that are :disabled — directly or via an ancestor <fieldset disabled>. It is a thin wrapper over node.matches(':disabled'), so it catches both explicitly disabled controls and ones disabled through a containing fieldset. Part of pota/use/form.

Arguments

Argument	Type	Description
node	Element	The element to check.

Returns: boolean — true when the element matches :disabled.

Examples

Inherit disabled from a fieldset

Toggling the <fieldset disabled> flips the result for the inner input even though the input itself is never marked disabled.

import { ref, render, signal } from 'pota'
import { isDisabled } from 'pota/use/form'

function App() {
	const inputRef = ref()
	const off = signal(true)
	const status = signal('')

	return (
		<form>
			<fieldset disabled={off.read}>
				<input
					use:ref={inputRef}
					name="title"
					value="hello"
				/>
			</fieldset>
			<button
				type="button"
				on:click={() => off.update(prev => !prev)}
			>
				toggle fieldset
			</button>
			<button
				type="button"
				on:click={() =>
					status.write(
						isDisabled(inputRef()) ? 'disabled' : 'enabled',
					)
				}
			>
				check
			</button>
			<p>{status.read}</p>
		</form>
	)
}

render(App)