javascript - JS数组适用于一个函数但不适用于另一个函数

Question

我的JS功夫不行，来求助了。我有一个 form.php 页面，其中有大约 20 个输入字段；但是，如果单击一个单选按钮，则需要禁用一半以上的输入字段。这是我到目前为止所拥有的:

  <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>

JS 实际上在没有 fieldsAffected 数组的情况下按要求工作，使用下面两个 JS 函数中的注释掉的 block 。但是因为如果选择了 280 单选按钮，我将有一个较长的要禁用的 elementIds 列表，所以我想使用数组和循环来管理受影响的 elementIds 的禁用-启用。

数组必须是好的，因为它在第一个 JS 函数中用于检查 280 单选按钮是否被选中，取决于 mysql 数据，当页面首次加载时，禁用-启用数组中的 elementIds 按预期排列。但是随后单击 280 或 284 按钮，在以下两个 JS 函数中使用相同的数组，当 280 或 284 单选按钮在初始页面加载后被点击。

但是数组似乎不起作用的第二个和第三个函数必须没问题，因为没有数组，并且所有 elementIds 都一一列出，输入字段会在 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

1. 没有 window.onload 和 document.ready
2. DRY - 不要重复自己
3. 你在使用jQuery选择ID时漏掉了前面的“#”
4. 我使用 .each这减少了代码和复杂性
5. 不要删除要切换的属性

// 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/>