Click here to Skip to main content
15,880,543 members
Home / Discussions / JavaScript
   

JavaScript

 
AnswerRe: Why can't execute the code to the secondary window in javascript? Pin
Richard Deeming7-Feb-21 22:06
mveRichard Deeming7-Feb-21 22:06 
QuestionUse radiobutton and checkbox together Pin
Member 150649444-Feb-21 13:24
Member 150649444-Feb-21 13:24 
AnswerRe: Use radiobutton and checkbox together Pin
Richard MacCutchan4-Feb-21 22:52
mveRichard MacCutchan4-Feb-21 22:52 
GeneralRe: Use radiobutton and checkbox together Pin
Member 150649444-Feb-21 23:57
Member 150649444-Feb-21 23:57 
GeneralRe: Use radiobutton and checkbox together Pin
Richard MacCutchan4-Feb-21 23:59
mveRichard MacCutchan4-Feb-21 23:59 
GeneralRe: Use radiobutton and checkbox together Pin
Richard Deeming5-Feb-21 0:47
mveRichard Deeming5-Feb-21 0:47 
GeneralRe: Use radiobutton and checkbox together Pin
Richard MacCutchan5-Feb-21 1:01
mveRichard MacCutchan5-Feb-21 1:01 
AnswerRe: Use radiobutton and checkbox together Pin
Richard Deeming5-Feb-21 1:17
mveRichard Deeming5-Feb-21 1:17 
Probably not the nicest UX, but you can disable the radiobuttons based on the previous element selection.

For example, given the markup:
HTML
<ul>
    <li>
        <label><input type="checkbox" name="a"> A</label>
        <ul>
            <li><label><input type="radio" name="opta" value="1"> Position 1</label></li>
            <li><label><input type="radio" name="opta" value="2"> Position 2</label></li>
            <li><label><input type="radio" name="opta" value="3"> Position 3</label></li>
        </ul>
    </li>
    <li>
        <label><input type="checkbox" name="b"> B</label>
        <ul>
            <li><label><input type="radio" name="optb" value="1"> Position 1</label></li>
            <li><label><input type="radio" name="optb" value="2"> Position 2</label></li>
            <li><label><input type="radio" name="optb" value="3"> Position 3</label></li>
        </ul>
    </li>
    <li>
        <label><input type="checkbox" name="a"> C</label>
        <ul>
            <li><label><input type="radio" name="optc" value="1"> Position 1</label></li>
            <li><label><input type="radio" name="optc" value="2"> Position 2</label></li>
            <li><label><input type="radio" name="optc" value="3"> Position 3</label></li>
        </ul>
    </li>
</ul>
then the following Javascript will dynamically enable or disable the radiobuttons as you select different options:
JavaScript
let updateOptions = () => document.querySelectorAll("input[type='checkbox']").forEach(chk => {
    // Find the containing list item:
    let li = chk.closest("li");
    
    // Iterate over the radiobuttons in the same list item:
    li.querySelectorAll("input[type='radio']").forEach(rbn => {
        // If the checkbox is not checked, no position can be selected:
        if (!chk.checked){
            rbn.disabled = true;
            rbn.checked = false;
            return;
        }
        
        // If the same position is selected for any previous option, it cannot be selected:
        let value = rbn.value;
        let prevLi = li.previousElementSibling;
        while (prevLi !== null){
            var prevRbn = prevLi.querySelector(`input[type='radio'][value='${value}']`);
            if (prevRbn?.checked){
                rbn.disabled = true;
                rbn.checked = false;
                return;
            }
            
            prevLi = prevLi.previousElementSibling;
        }
        
        // This position can be selected:
        rbn.disabled = false;
    });
});

document.querySelectorAll("input[type='checkbox'], input[type='radio']").forEach(el => el.addEventListener("click", updateOptions));
updateOptions();
Demo[^]



"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

GeneralRe: Use radiobutton and checkbox together Pin
Member 150649445-Feb-21 1:44
Member 150649445-Feb-21 1:44 
QuestionHow to use decimals (0.01) in Javascript function Pin
Member 150641013-Feb-21 18:17
Member 150641013-Feb-21 18:17 
AnswerRe: How to use decimals (0.01) in Javascript function Pin
Richard MacCutchan3-Feb-21 22:54
mveRichard MacCutchan3-Feb-21 22:54 
GeneralRe: How to use decimals (0.01) in Javascript function Pin
mikehunterr5-Feb-21 1:08
professionalmikehunterr5-Feb-21 1:08 
GeneralRe: How to use decimals (0.01) in Javascript function Pin
Richard MacCutchan5-Feb-21 1:09
mveRichard MacCutchan5-Feb-21 1:09 
GeneralRe: How to use decimals (0.01) in Javascript function Pin
mikehunterr5-Feb-21 1:19
professionalmikehunterr5-Feb-21 1:19 
QuestionAssignment Help Pin
Member 150639523-Feb-21 13:12
Member 150639523-Feb-21 13:12 
AnswerRe: Urgent Java Assignment Help Pin
Richard Deeming3-Feb-21 21:45
mveRichard Deeming3-Feb-21 21:45 
Questionhow can i unmute a video using js for chrome Pin
Member 148717432-Feb-21 23:28
Member 148717432-Feb-21 23:28 
AnswerRe: how can i unmute a video using js for chrome Pin
Richard Deeming3-Feb-21 0:41
mveRichard Deeming3-Feb-21 0:41 
QuestionTrying to limit a input type=text only decimal values with 2 digits after decimal Pin
simpledeveloper1-Feb-21 21:14
simpledeveloper1-Feb-21 21:14 
AnswerRe: Trying to limit a input type=text only decimal values with 2 digits after decimal Pin
Richard Deeming1-Feb-21 21:47
mveRichard Deeming1-Feb-21 21:47 
GeneralRe: Trying to limit a input type=text only decimal values with 2 digits after decimal Pin
simpledeveloper2-Feb-21 6:43
simpledeveloper2-Feb-21 6:43 
QuestionIs there a delicate way to pass calendar events variables in Javascript Pin
Member 1505943129-Jan-21 0:04
Member 1505943129-Jan-21 0:04 
AnswerRe: Is there a delicate way to pass calendar events variables in Javascript Pin
Richard Deeming29-Jan-21 0:16
mveRichard Deeming29-Jan-21 0:16 
GeneralRe: Is there a delicate way to pass calendar events variables in Javascript Pin
Member 1505943129-Jan-21 1:58
Member 1505943129-Jan-21 1:58 
GeneralBuild an entire React application in one command Pin
DonJon28-Jan-21 19:22
DonJon28-Jan-21 19:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.