I currently don't see a way in the Field Rules to hide/show a checkbox option within a checkbox group. So, I thought I would try Javascript but it appears to only work in the web browser dev console, and not in the Inline Javascript of the form. I know that Javascript in the Modern Forms designer uses a "sandboxed" model, and I tried some simple tests with LFForm.hideFields({fieldId: 347}), for example, but I can't figure out how to get the same functionality as this:
(function () {
function toggleCheckboxOption() {
let selectedLabel = "";
// Step 1: Find the <label> for "I am requesting for" and get the selected radio button's label
const $groupLabel = $("label.field-label:contains('I am requesting for')");
if ($groupLabel.length > 0) {
// Step 2: Find the radio group related to the label
const $radioGroup = $groupLabel.closest("fl-radio");
// Step 3: Find the checked radio button
const $selectedRadio = $radioGroup.find("input[type='radio']:checked");
if ($selectedRadio.length > 0) {
// Step 4: Get its ID and find the matching label's <span>
const radioId = $selectedRadio.attr("id");
const $labelSpan = $radioGroup.find("label[for='" + radioId + "'] span");
if ($labelSpan.length > 0) {
selectedLabel = $labelSpan.text().trim();
}
}
}
console.log("✅ Scoped selected label:", selectedLabel);
// Step 5: Target the "New User Accounts" checkbox based on its value
const $targetCheckbox = $("input[type='checkbox'][value='New_User_Account']").closest('.option');
if (selectedLabel === "New Employee") {
$targetCheckbox.show();
} else {
$targetCheckbox.hide();
$targetCheckbox.find('input').prop('checked', false);
}
}
// Run initially
toggleCheckboxOption();
// Re-run when any radio button is changed
$(document).on('change', "input[type='radio']", toggleCheckboxOption);
})();