Reducing Opacity of Parent When Checkbox is Checked

January 28, 2021 by admin

I am trying to reduce the opacity of a table (with class=”test”) whenever a checkbox that is within the table is checked. For some reason, only the checkbox itself fades. I don’t understand what I’m doing wrong. My code is below. Thanks for the help.

table.test input[name="delete_record[]"]:checked {
  opacity: 0.5;
}

<table class="test" cellpadding="10" cellspacing="0" align="center" bgcolor="#9CDEEC" border="0" style="margin-bottom: 16px;border-radius: 4px;border: 1px solid #555555;">
  <!-- Transactions table -->
  <tbody>
    <tr>

      <td>
        <input style="width: 90px;" type="text" class="datepicker" name="date[]" required="" value="01/09/1970">
      </td>

      <td>
        <input type="text" name="payee[]" required="" value="Hateful!">
      </td>


      <td rowspan="2" align="left" valign="top">
        <a title="Memo: They're customer service is astounding.">
          <textarea rows="3" style="text-align: left; border: 1px solid #AAAAAA; width: 200px; background-color: #FFFFFF; padding: 3px;" name="memo[]">They're customer service is astounding.</textarea>
        </a>
      </td>
      <td>
        <select name="reconciled[]">
          <option value="R" selected="selected">R</option>
          <option value=""></option>
          <option value="C">C</option>
          <option value="R">R</option>
        </select>
      </td>

      <td>
        <input style="width: 100px; text-align: right;" type="number" step="0.01" name="deposit[]" size="4" min="0" max="100000000" value="">
      </td>
      <td>
        <input style="width: 100px; text-align: right;" type="number" step="0.01" name="withdrawal[]" size="4" min="0" max="100000000" value="37.00">
      </td>
      <input type="hidden" name="record_id[]" value="95">
      <td rowspan="2" align="center" valign="middle">
        <input type="checkbox" name="delete_record[]" value="95">
      </td>
    </tr>

    <tr>
      <td>
        <input style="width: 60px;" placeholder="Check #" type="number" step="1" min="0" max="1000000000" name="check_number[]" value="110">
      </td>
      <td>
        <select name="category[]" style="width: 200px;">
          <option value="1" selected="selected">Business: Advertising</option>
          <option value="42">Business</option>
          <option value="1">Business: Advertising</option>
          <option value="2">Business: Assets</option>
          <option value="24">Business: Automotive: Auto Insurance</option>
          <option value="25">Business: Automotive: Auto Loan</option>
          <option value="26">Business: Automotive: Repairs</option>
          <option value="27">Business: Automotive: Fuel</option>
          <option value="28">Business: Automotive: Parking and Tolls</option>
          <option value="29">Business: Automotive: Registration</option>
          <option value="30">Business: Automotive: Vehicle Leasing</option>
          <option value="31">Business: Automotive: Wash and Road Services</option>
          <option value="3">Business: Commissions and Fees</option>
          <option value="4">Business: Contract Labor</option>
          <option value="23">Business: H.S.A. Contrbutions</option>
          <option value="22">Business: Health Insurance Premiums</option>
          <option value="10">Business: Home Office Other Expenses</option>
          <option value="12">Business: Home Office Rent and Lease</option>
          <option value="37">Business: Home Office Repairs and Maintenence</option>
          <option value="5">Business: Insurance</option>
          <option value="32">Business: Interest Paid: Business Loan</option>
          <option value="33">Business: Interest Paid: Business Mortgage</option>
          <option value="34">Business: Interest Paid: Credit Card</option>
          <option value="35">Business: Interest Paid: Home Office Mortgage</option>
          <option value="6">Business: Legal and Professional Services</option>
          <option value="7">Business: Materials and Supplies</option>
          <option value="8">Business: Meals and Entertainment</option>
          <option value="9">Business: Office Expenses</option>
          <option value="11">Business: Rent and Lease</option>
          <option value="36">Business: Repairs and Maintenence</option>
          <option value="13">Business: Taxes and Licenses: Licenses</option>
          <option value="14">Business: Taxes and Licenses: Property Tax</option>
          <option value="15">Business: Taxes and Licenses: Estimated Taxes</option>
          <option value="16">Business: Taxes and Licenses: Federal Tax</option>
          <option value="17">Business: Taxes and Licenses: Home Office Property Tax</option>
          <option value="18">Business: Taxes and Licenses: State Tax</option>
          <option value="19">Business: Travel</option>
          <option value="20">Business: Utilities: Utilities</option>
          <option value="21">Business: Utilities: Home Office Utilities</option>
          <option value="43">Personal</option>
          <option value="51">Personal: Automotive</option>
          <option value="52">Personal: Charity and Donations</option>
          <option value="53">Personal: Child Care</option>
          <option value="54">Personal: Clothing</option>
          <option value="55">Personal: Education</option>
          <option value="56">Personal: Entertainment</option>
          <option value="48">Personal: Furnishings</option>
          <option value="63">Personal: Gift</option>
          <option value="44">Personal: Groceries</option>
          <option value="47">Personal: Health and Fitness</option>
          <option value="57">Personal: Home Maintenance and Repairs</option>
          <option value="50">Personal: Insurance</option>
          <option value="58">Personal: Medical</option>
          <option value="59">Personal: Mortgage</option>
          <option value="49">Personal: Pets</option>
          <option value="60">Personal: Property Tax</option>
          <option value="61">Personal: Rent</option>
          <option value="46">Personal: Resturants</option>
          <option value="62">Personal: Travel and Vacation</option>
          <option value="45">Personal: Utilities</option>
          <option value="38">Transfer: Bank to Bank</option>
          <option value="39">Transfer: Credit Card Payment</option>
          <option value="40">Transfer: Owner's Deposit</option>
          <option value="41">Transfer: Owner's Withdrawal</option>
        </select>
      </td>
      <td colspan="3" align="right" valign="middle" style="padding-right: 20px;">
        <!--  Accounts Selector -->
        <select name="bank_account[]">
          <option value="19">Chroot Checking</option>
          <option value="10">Main Checking</option>
          <option value="19">Chroot Checking</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>