JS array works for one function but not in another function

Question

My JS kung fu is non-existent so I come asking for help. I have a form.php page in which I have about 20 input fields; however, if one radio button is clicked more than half of those input fields need to be disabled. Here's what I have so far:

  <script type="text/javascript" charset="utf-8">
    // create an array of all elementId's that need to be disabled/enabled based on whether radio button TR 280 or 284 is selected
    let fieldsAffected = [ 'f2Cct2Or4Wire2W', 'f2Cct2Or4Wire4W', 'f3Cct2Or4Wire2W', 'f3Cct2Or4Wire4W', 'f4Cct2Or4Wire2W', 'f4Cct2Or4Wire4W' ];

    function eqptTypeVal() { // FUNC to check the state of eqptType when page first loads and disabling/enabling required fields as necessary
      var rs = document.querySelector( 'input[ name = "eqptType" ]:checked' ).value;
      if ( rs == '280' ) {
        for ( let i = 0; i < fieldsAffected.length; i++ ) {
          document.getElementById( fieldsAffected[ i ] ).setAttribute( 'disabled', true );
        } // close FOR
      } else {
        for ( let i = 0; i < fieldsAffected.length; i++ ) {
          document.getElementById( fieldsAffected[ i ] ).removeAttibute( 'disabled' );
        } // close FOR
      } // close IF
    } // close FUNC eqptTypeVal
    window.onload = eqptTypeVal;

    $( document ).ready( function() { // FUNC to monitor 280 radio button and when clicked disable the elementIds in array fieldsAffected
      $( '#eqptType280' ).click( function() {
        for ( let i = 0; i < fieldsAffected.length; i++ ) {
          $( fieldsAffected[ i ] ).setAttribute( 'disabled', true );
        } // close FOR
        /*
        $( '#f2Cct2Or4Wire2W' ).attr( 'disabled', true );
        $( '#f2Cct2Or4Wire4W' ).attr( 'disabled', true );
        $( '#f3Cct2Or4Wire2W' ).attr( 'disabled', true );
        $( '#f3Cct2Or4Wire4W' ).attr( 'disabled', true );
        $( '#f4Cct2Or4Wire2W' ).attr( 'disabled', true );
        $( '#f4Cct2Or4Wire4W' ).attr( 'disabled', true );
         */
      });
    }); // close docReady FUNC

    $( document ).ready( function() { // FUNC to monitor 284 radio button and when clicked enable the elementIds in array fieldsAffected
      $( '#eqptType284' ).click( function() {
      for ( let i = 0; i < fieldsAffected.length; i++ ) {
        $( fieldsAffected[ i ] ).setAttribute( 'disabled', false );
      } // close FOR
      /*
        $( '#f2Cct2Or4Wire2W' ).attr( 'disabled', false );
        $( '#f2Cct2Or4Wire4W' ).attr( 'disabled', false );
        $( '#f3Cct2Or4Wire2W' ).attr( 'disabled', false );
        $( '#f3Cct2Or4Wire4W' ).attr( 'disabled', false );
        $( '#f4Cct2Or4Wire2W' ).attr( 'disabled', false );
        $( '#f4Cct2Or4Wire4W' ).attr( 'disabled', false );
       */
      });
    }); // close docReady FUNC
  </script>

The JS actually works as required without the fieldsAffected array, using the commented out blocks in the lower two JS functions. But because I will have a longish list of elementIds to disable if the 280 radio button is selected then I want to use an array and loop to manage the disabling-enabling of the affected elementIds.

The array must be good because it is used in first JS function to check whether or not the 280 radio button is selected, depending on mysql data, when the page first loads, disabling-enabling the elementIds in the array as intended. But then clicking on either the 280 or 284 buttons thereafter, using the same array in the following two JS functions, no change in the array's elementIds occurs when either the 280 or 284 radio buttons are clicked after initial page load.

But the 2nd and 3rd functions in which the array does not seem to work must be ok, because without the array, and all the elementIds listed out one by one, the input fields do disable-enabled whenever the 280 or 284 radio buttons are clicked.

But I really know nothing about JS. Can anyone help point out some likely nuances of the language lost in my hacking together the array and functions I pasted above?

<=== HTML added ===>

<fieldset class="fieldsetToneRemote">
      <legend>Eqpt ID</legend>
      <div class="formRowDiv">
        <label>
          <span>Eqpt Type:</span>
          <input type="radio" id="eqptType280" name="eqptType"  value="280"
            <?php
            if ( $_SESSION[ 'eqptType' ] == "280" ) {
                echo ' checked';
              }
            ?>
          >
          <span class="radioLabel">280</span>
          <input type="radio" id="eqptType284" name="eqptType" value="284"
            <?php
            if ( empty( $_SESSION[ 'eqptType' ] ) || is_null( $_SESSION[ 'eqptType' ] ) ) {
              echo ' checked';
            } elseif ( $_SESSION[ 'eqptType' ] == "284" ) {
                echo ' checked';
              }
            ?>
          >
          <span class="radioLabel">284</span>
        </label>
      </div><!-- close formRowDiv -->

Answer 1

1. do not have window.onload AND document.ready
2. DRY - don't repeat yourself
3. you are missing the "#" in front when you use jQuery to select IDs
4. I use .each which reduces the code and complexity
5. do not remove a property you want to toggle

// create an array of all elementId's that need to be disabled/enabled based on whether radio button TR 280 or 284 is selected
var fieldsAffected = ['f2Cct2Or4Wire2W', 'f2Cct2Or4Wire4W', 'f3Cct2Or4Wire2W', 'f3Cct2Or4Wire4W', 'f4Cct2Or4Wire2W', 'f4Cct2Or4Wire4W'];

function eqptTypeVal() { // FUNC to check the state of eqptType when page first loads and disabling/enabling required fields as necessary
  var rs = $('input[name="eqptType"]:checked').val() == 280;
  $.each(fieldsAffected, function(i, val) {
    $("#" + val).prop('disabled', rs);
  })
} // close FUNC eqptTypeVal

$(function() { // when page loads
  eqptTypeVal(); // run the function
  // when either radio is clicked, run the function
  $('input[name="eqptType"]').on("click", eqptTypeVal);
}); // close docReady FUNC

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" name="eqptType" value="280" checked/>280</label>
<label><input type="radio" name="eqptType" value="284" />284</label><br/>
<input id="f2Cct2Or4Wire2W" /><br/>
<input id="f2Cct2Or4Wire4W" /><br/> 
<input id="f3Cct2Or4Wire2W" /><br/> 
<input id="f3Cct2Or4Wire4W" /><br/> 
<input id="f4Cct2Or4Wire2W" /><br/> 
<input id="f4Cct2Or4Wire4W" /><br/>