<xf:checkboxrow
	hint="{$hintHtml}"
	explain="{$explainHtml}"
	html="{$listedHtml}"
	rowclass="{$rowClass}">

	<xf:option name="{$inputName}" selected="$option.option_value" class="js-enableTrophies">{$option.title}</xf:option>
</xf:checkboxrow>

<xf:js>
	processCheckBox()

	const enable = document.querySelector('.js-enableTrophies', 'click', () =>
	{
		processCheckBox()
	})

	function processCheckBox ()
	{
		const userTitle = document.querySelector('input[name="options[userTitleLadderField]"]:checked'),
			trophyOption = document.querySelector('.js-trophy_points'),
			messageOption = document.querySelector('.js-messages'),
			enableTrophies = document.querySelector('.js-enableTrophies')

		if (enableTrophies.checked)
		{
			trophyOption.removeAttribute('disabled')
		}
		else
		{
			trophyOption.setAttribute('disabled', true)

			if (userTitle && userTitle.value === 'trophy_points')
			{
				messageOption.checked = true
			}
		}
	}
</xf:js>