Topics

javascript question

Stein Goering
 

Trying to come up with event code that will act on the below HTML.  What I want to do is enable the green checkbox, but leave the yellow ones disabled.

 

This script enables all the checkboxes in the div:

 $(".specifyMemb.membNeeded-" + membCode + " :checkbox").prop("checked"false).attr("disabled"false);

 

I thought this would skip the qpOptfee elements, but it doesn't work:

 $(".specifyMemb.membNeeded-" + membCode + ":not(.qpOptfee) :checkbox").prop("checked"false).attr("disabled"false);

 

So I tried explicitly setting those child members back to enabled:

  $(".specifyMemb.membNeeded-" + membCode + "  > qpOptfee :checkbox ").attr("disabled"true);

 

No go there either.

 

Any suggestions as to how to accomplish this would be appreciated.

 

<div class="qpCell  membNeeded-OLLI specifyMemb">

<span class="qpCheckbox" onmouseover="LPStart(event,'04UACME') " onfocus="LPStart(event,'04UACME') " onmouseout="LPStop()" onblur="LPStop()"><input type="checkbox" value="04UACME>TEST" name="chkCourse" class="hoursLimit3" id="04UACME-3" data-hourlimit="16" data-hourstaken="0" data-hours="7" disabled="disabled">

<label for="04UACME-3"><span class="qpCrsecode">04UACME</span> - ACME Cleaners Customer Service Training

</label></span><br>

<p class="qpDate"> Day of week and time(s): 11/24/2020</p>

<p class="qpCost qpMultifee"><input type="radio" value="1" name="regFee-04UACME-TEST" class="TESTord1 forMemb-OLLI userSelect"> Company Paid:     $25.00</p>

<p class="qpCost qpMultifee"><input type="radio" value="2" name="regFee-04UACME-TEST" class="TESTord2 forMemb-OLLI userSelect"> Contract Price:     $30.00</p>

<p class="qpCost qpMultifee"><input type="radio" value="3" name="regFee-04UACME-TEST" class="TESTord3 forMemb-OLLI userSelect"> Full Fee:     $33.00</p>

<p>Optional Fees:</p>

<p class="qpCost qpOptfee"><input type="checkbox" value="1" name="optFee-04UACME-TEST" class="qpOptionBox" data-feeamount="15" id="04UACME-3-O-1" disabled="disabled"> Extra Lunch:     $15.00</p>

<p class="qpCost qpOptfee"><input type="checkbox" value="3" name="optFee-04UACME-TEST" class="qpOptionBox" data-feeamount="5" id="04UACME-3-O-3" disabled="disabled"> Key Chain:      $5.00</p>

<p class="qpCost qpOptfee"><input type="checkbox" value="4" name="optFee-04UACME-TEST" class="qpOptionBox" data-feeamount="7.50" id="04UACME-3-O-4" disabled="disabled"> Proceedings CD:      $7.50</p>

<p class="qpStatus"> Status: <span class="openStat">Open</span></p>

</div>

 

--stein

 

Stein Goering, web developer

ACEware Systems, Inc

 

Cliff
 

you've got id's for each check box and id's are unique. Just select the id and enable/disable it.

chkBox = document.getElementById('04UACME-3');
chkBox.disabled = true / false;
chkBox.checked = true/ false;

If you need more generality you could add classes selector classes to the checkboxes and if you need to de-couple the event code you could pass element references to it.


      
--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 / cliff@...

On 4/22/2020 4:13 PM, Stein Goering wrote:

Trying to come up with event code that will act on the below HTML.  What I want to do is enable the green checkbox, but leave the yellow ones disabled.

 

This script enables all the checkboxes in the div:

 $(".specifyMemb.membNeeded-" + membCode + " :checkbox").prop("checked"false).attr("disabled"false);

 

I thought this would skip the qpOptfee elements, but it doesn't work:

 $(".specifyMemb.membNeeded-" + membCode + ":not(.qpOptfee) :checkbox").prop("checked"false).attr("disabled"false);

 

So I tried explicitly setting those child members back to enabled:

  $(".specifyMemb.membNeeded-" + membCode + "  > qpOptfee :checkbox ").attr("disabled"true);

 

No go there either.

 

Any suggestions as to how to accomplish this would be appreciated.

 

<div class="qpCell  membNeeded-OLLI specifyMemb">

<span class="qpCheckbox" onmouseover="LPStart(event,'04UACME') " onfocus="LPStart(event,'04UACME') " onmouseout="LPStop()" onblur="LPStop()"><input type="checkbox" value="04UACME>TEST" name="chkCourse" class="hoursLimit3" id="04UACME-3" data-hourlimit="16" data-hourstaken="0" data-hours="7" disabled="disabled">

<label for="04UACME-3"><span class="qpCrsecode">04UACME</span> - ACME Cleaners Customer Service Training

</label></span><br>

<p class="qpDate"> Day of week and time(s): 11/24/2020</p>

<p class="qpCost qpMultifee"><input type="radio" value="1" name="regFee-04UACME-TEST" class="TESTord1 forMemb-OLLI userSelect"> Company Paid:     $25.00</p>

<p class="qpCost qpMultifee"><input type="radio" value="2" name="regFee-04UACME-TEST" class="TESTord2 forMemb-OLLI userSelect"> Contract Price:     $30.00</p>

<p class="qpCost qpMultifee"><input type="radio" value="3" name="regFee-04UACME-TEST" class="TESTord3 forMemb-OLLI userSelect"> Full Fee:     $33.00</p>

<p>Optional Fees:</p>

<p class="qpCost qpOptfee"><input type="checkbox" value="1" name="optFee-04UACME-TEST" class="qpOptionBox" data-feeamount="15" id="04UACME-3-O-1" disabled="disabled"> Extra Lunch:     $15.00</p>

<p class="qpCost qpOptfee"><input type="checkbox" value="3" name="optFee-04UACME-TEST" class="qpOptionBox" data-feeamount="5" id="04UACME-3-O-3" disabled="disabled"> Key Chain:      $5.00</p>

<p class="qpCost qpOptfee"><input type="checkbox" value="4" name="optFee-04UACME-TEST" class="qpOptionBox" data-feeamount="7.50" id="04UACME-3-O-4" disabled="disabled"> Proceedings CD:      $7.50</p>

<p class="qpStatus"> Status: <span class="openStat">Open</span></p>

</div>

 

--stein

 

Stein Goering, web developer

ACEware Systems, Inc

 

Stein Goering
 

Thanks, the IDs are not constant so I do need more generality, but adding a class selector worked great (per Eric's backchannel suggestion).   After flagging the target checkboxes with a class named topLevel, I used the following code:

 

   $(".specifyMemb.membNeeded-" + membCode + " :checkbox.topLevel").prop("checked"false).attr("disabled"false); 

 

Sorry, should have done a follow up to let everyone know that I had a solution.

 

--stein

 

From: MadFox@groups.io On Behalf Of Cliff
Sent: Tuesday, April 28, 2020 04:11 PM
To: MadFox@groups.io
Subject: Re: [MadFox] javascript question

 

you've got id's for each check box and id's are unique. Just select the id and enable/disable it.

chkBox = document.getElementById('04UACME-3');
chkBox.disabled = true / false;
chkBox.checked = true/ false;

If you need more generality you could add classes selector classes to the checkboxes and if you need to de-couple the event code you could pass element references to it.

 

 

--
Cliff
Cliff Smith / HawkRidge Enterprises
(608) 647-2366 /
cliff@...

On 4/22/2020 4:13 PM, Stein Goering wrote:

Trying to come up with event code that will act on the below HTML.  What I want to do is enable the green checkbox, but leave the yellow ones disabled.

 

This script enables all the checkboxes in the div:

 $(".specifyMemb.membNeeded-" + membCode + " :checkbox").prop("checked"false).attr("disabled"false);

 

I thought this would skip the qpOptfee elements, but it doesn't work:

 $(".specifyMemb.membNeeded-" + membCode + ":not(.qpOptfee) :checkbox").prop("checked"false).attr("disabled"false);

 

So I tried explicitly setting those child members back to enabled:

  $(".specifyMemb.membNeeded-" + membCode + "  > qpOptfee :checkbox ").attr("disabled"true);

 

No go there either.

 

Any suggestions as to how to accomplish this would be appreciated.

 

<div class="qpCell  membNeeded-OLLI specifyMemb">

<span class="qpCheckbox" onmouseover="LPStart(event,'04UACME') " onfocus="LPStart(event,'04UACME') " onmouseout="LPStop()" onblur="LPStop()"><input type="checkbox" value="04UACME>TEST" name="chkCourse" class="hoursLimit3" id="04UACME-3" data-hourlimit="16" data-hourstaken="0" data-hours="7" disabled="disabled">

<label for="04UACME-3"><span class="qpCrsecode">04UACME</span> - ACME Cleaners Customer Service Training

</label></span><br>

<p class="qpDate"> Day of week and time(s): 11/24/2020</p>

<p class="qpCost qpMultifee"><input type="radio" value="1" name="regFee-04UACME-TEST" class="TESTord1 forMemb-OLLI userSelect"> Company Paid:     $25.00</p>

<p class="qpCost qpMultifee"><input type="radio" value="2" name="regFee-04UACME-TEST" class="TESTord2 forMemb-OLLI userSelect"> Contract Price:     $30.00</p>

<p class="qpCost qpMultifee"><input type="radio" value="3" name="regFee-04UACME-TEST" class="TESTord3 forMemb-OLLI userSelect"> Full Fee:     $33.00</p>

<p>Optional Fees:</p>

<p class="qpCost qpOptfee"><input type="checkbox" value="1" name="optFee-04UACME-TEST" class="qpOptionBox" data-feeamount="15" id="04UACME-3-O-1" disabled="disabled"> Extra Lunch:     $15.00</p>

<p class="qpCost qpOptfee"><input type="checkbox" value="3" name="optFee-04UACME-TEST" class="qpOptionBox" data-feeamount="5" id="04UACME-3-O-3" disabled="disabled"> Key Chain:      $5.00</p>

<p class="qpCost qpOptfee"><input type="checkbox" value="4" name="optFee-04UACME-TEST" class="qpOptionBox" data-feeamount="7.50" id="04UACME-3-O-4" disabled="disabled"> Proceedings CD:      $7.50</p>

<p class="qpStatus"> Status: <span class="openStat">Open</span></p>

</div>

 

--stein

 

Stein Goering, web developer

ACEware Systems, Inc