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函数中的注释掉的块。但是因为如果选择了 280 单选按钮，我将有一个很长的elementIds列表来禁用，那么我想使用数组和循环来管理受影响的elementIds的禁用 - 启用。

数组必须是好的，因为它在第一个JS函数中用于检查是否选择 280 单选按钮，具体取决于mysql数据，当页面首次加载时，禁用 - 启用elementIds在数组中按预期方式。但是之后点击 280 或 284 按钮，在以下两个JS函数中使用相同的数组，当数组的任何一个元素都没有发生变化时初始页面加载后，单击 280 或 284 单选按钮。

但是数组似乎不起作用的第2和第3个函数必须正常，因为没有数组，并且所有elementIds逐个列出，输入字段会在 280时禁用 - 启用单击或 284 单选按钮。

但我对JS一无所知。任何人都可以帮助指出我的黑客攻击中丢失的语言的一些可能的细微差别我上面粘贴的数组和函数？

＆lt; === HTML添加===＆gt;

<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
干 - 不要自己重复
你错过了＆＃34;＃＆＃34;当您使用jQuery选择ID时，在前面
我使用.each来减少代码和复杂性
不要删除要切换的媒体资源

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: