Key/labels for Multiple Choice fields

In multiple cases I had the need to expose a longer descriptive text in the checkbox/radio label instead of the actual value.

For example, suppose a "Shipping" field that has the options "normal" and "fast". I want to have show longer descriptive texts such as "Normal (3-4 days)" and "Fast (24 hours) +$40".

Currently I'm performing a label change via JavaScript but it's annoying also because the HTML markup generated by Knack is not very nice to work with in this case:

<label class="option">

<input type="checkbox" name="field_16" value="Normal">

Normal

</label>

As you see, the label text is not enclosed in any <span> tag so in order to replace it with jQuery you need something like this:

$('#kn-input-field_16 label.option').contents()

.filter(function() { return this.nodeType === 3; }).remove();

$('#kn-input-field_16 label.option:eq(0)').append(" Normal (bla bla)");


$('#kn-input-field_16 label.option:eq(1)').append(" Fast (bla bla)");

which is not very nice.

I suggest to add these key/value dictionaries at form level, because one would need different descriptive text for each context, or even different languages like in my case.