JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<div class="form-item js-form-item form-type-checkbox js-form-type-checkbox form-item-horses-riding-items-2--item--entry-extras-a3e3g0000004xtbuaq js-form-item-horses-riding-items-2--item--entry-extras-a3e3g0000004xtbuaq checkbox">
  
  
  

      

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'form_element_label' -->
<!-- BEGIN OUTPUT from 'profiles/british_eventing/themes/bootstrap/templates/input/form-element-label.html.twig' -->
<label for="edit-horses-riding-items-2-item-entry-extras-a3e3g0000004xtbuaq--337Ep0e7CMg" class="control-label option">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'input__checkbox' -->
<!-- FILE NAME SUGGESTIONS:
   * input--checkbox.html.twig
   x input.html.twig
-->
<!-- BEGIN OUTPUT from 'profiles/british_eventing/themes/bootstrap/templates/input/input.html.twig' -->
<input data-drupal-selector="edit-horses-riding-items-2-item-entry-extras-a3e3g0000004xtbuaq" class="form-checkbox" type="checkbox" id="edit-horses-riding-items-2-item-entry-extras-a3e3g0000004xtbuaq--337Ep0e7CMg" name="horses_riding[items][2][_item_][entry_extras][a3E3G0000004xtBUAQ]" value="a3E3G0000004xtBUAQ">
<!-- END OUTPUT from 'profiles/british_eventing/themes/bootstrap/templates/input/input.html.twig' -->

Test Mandatory Extra (£12.00)</label>
<!-- END OUTPUT from 'profiles/british_eventing/themes/bootstrap/templates/input/form-element-label.html.twig' -->


  </div>

JavaScript

var $checkbox = $('.form-item.form-type-checkbox:contains("Test") input:checkbox');

  $checkbox.attr('checked', true)
    .attr('disabled', true);