JS array works for one function, but not in another function

Question

My JS kung fu does not exist, so I seek help. I have a form.php page in which I have about 20 input fields; however, if one radio button is pressed, more than half of these input fields must be disabled. Here is what I still have:

  <script type="text/javascript" charset="utf-8">
    // create an array of all elementId 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>

JS actually works as required, without the fieldsAffected array , using comment blocks in the bottom two JS functions. But since I will have a long list of elementIds to disable, if switch 280 is selected, I want to use an array and a loop to control the disable-enable of the affected elements.

, JS , 280 mysql, , - . 280 284 , JS , elementIds , 280 284 .

2- 3- , , , , , , 280 284 .

JS. - , , , ?

< === HTML === >

<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

• window.onload AND document.ready
• DRY -
• "#" , jQuery
• .each,
• ,

// create an array of all elementId 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/>