logo标签列表

纯JavaScript禁用位于div内的所有表单元素

javascript
11

有没有一种方法可以仅通过告诉父级div名称，使用纯javascript禁用表单中的所有字段（textarea/textfield/option/input/checkbox/submit等），而不是使用jquery或angular?

我想要纯javascript，因为我刚开始学习JS，发现所有不同的排列方式相当令人困惑。

我目前正在做这样的事情，但希望能够简化：

  <script type="text/javascript" charset="utf-8">
    ( document.onclick = function() {
      var clickNoElements = [ 'juniperPresentNo', 'customerJuniperPresentNo', 'mpr95001PresentNo', 'mpr95001PresentNo', 'noranTelPresentNo', 'powerPlantPresentNo', 'batteryRackCabinetPresentNo', 'bbu1PresentNo', 'siteAlarmMdfPresentNo', 'towerLightsPresentNo', 'generatorPresentNo', 'tlanPresentNo' ];

      var clickYesElements = [ 'juniperPresentYes', 'customerJuniperPresentYes', 'mpr95001PresentYes', 'mpr95001PresentYes', 'noranTelPresentYes', 'powerPlantPresentYes', 'batteryRackCabinetPresentYes', 'bbu1PresentYes', 'siteAlarmMdfPresentYes', 'towerLightsPresentYes', 'generatorPresentYes', 'tlanPresentYes' ];

      var disableEnableElements = [ 'buttonJuniperChecks', 'juniperChecksOk', 'juniperChecksNok', 'buttonBellCeJuniperChecks', 'customerJuniperChecksOk', 'bellCeJuniperChecksNok', 'buttonMpr95001Checks', 'mpr95001ChecksOk', 'mpr95001ChecksNok', 'buttonMpr95001Checks', 'mpr95001ChecksOk', 'mpr95001ChecksNok', 'buttonNoranTelChecks', 'noranTelChecksOk', 'noranTelChecksNok', 'buttonPowerPlantChecks', 'powerPlantChecksOk', 'powerPlantChecksNok', 'buttonBatteryRackCabinetChecks', 'batteryRackCabinetChecksOk', 'batteryRackCabinetChecksNok', 'buttonBbu1Checks', 'bbu1ChecksOk', 'bbu1ChecksNok', 'buttonSiteAlarmMdfChecks', 'siteAlarmMdfChecksOk', 'siteAlarmMdfChecksNok', 'buttonTowerLightsChecks', 'towerLightsChecksOk', 'towerLightsChecksNok', 'buttonGeneratorChecks', 'generatorChecksOk', 'generatorChecksNok', 'buttonTlanChecks', 'tlanPresentChecksOk', 'tlanPresentChecksNok' ];
    })();

    function mobilityJuniperPresent() {
      if ( document.getElementById( 'mobilityJuniperPresentNo' ).checked ) {
        document.getElementById( 'buttonMobilityJuniperChecks' ).disabled = true;
        document.getElementById( 'mobilityJuniperChecksOk' ).disabled = true;
        document.getElementById( 'mobilityJuniperChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonMobilityJuniperChecks' ).disabled = false;
        document.getElementById( 'mobilityJuniperChecksOk' ).disabled = false;
        document.getElementById( 'mobilityJuniperChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      mobilityJuniperPresent(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "mobilityJuniperPresent" ]' ).on( "click", mobilityJuniperPresent );
    }); // close docReady FUNC

    function customerJuniperPresent() {
      if ( document.getElementById( 'customerJuniperPresentNo' ).checked ) {
        document.getElementById( 'buttonCustomerJuniperChecks' ).disabled = true;
        document.getElementById( 'customerJuniperChecksOk' ).disabled = true;
        document.getElementById( 'customerJuniperChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonCustomerJuniperChecks' ).disabled = false;
        document.getElementById( 'customerbellceJuniperChecksOk' ).disabled = false;
        document.getElementById( 'customerJuniperChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      customerJuniperPresent(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "customerJuniperPresent" ]' ).on( "click", customerJuniperPresent );
    }); // close docReady FUNC

    function mpr95001Present() {
      if ( document.getElementById( 'mpr95001PresentNo' ).checked ) {
        document.getElementById( 'buttonMpr95001Checks' ).disabled = true;
        document.getElementById( 'mpr95001ChecksOk' ).disabled = true;
        document.getElementById( 'mpr95001ChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonMpr95001Checks' ).disabled = false;
        document.getElementById( 'mpr95001ChecksOk' ).disabled = false;
        document.getElementById( 'mpr95001ChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      mpr95001Present(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "mpr95001Present" ]' ).on( "click", mpr95001Present );
    }); // close docReady FUNC

    function mpr95002Present() {
      if ( document.getElementById( 'mpr95002PresentNo' ).checked ) {
        document.getElementById( 'buttonMpr95002Checks' ).disabled = true;
        document.getElementById( 'mpr95002ChecksOk' ).disabled = true;
        document.getElementById( 'mpr95002ChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonMpr95002Checks' ).disabled = false;
        document.getElementById( 'mpr95002ChecksOk' ).disabled = false;
        document.getElementById( 'mpr95002ChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      mpr95002Present(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "mpr95002Present" ]' ).on( "click", mpr95002Present );
    }); // close docReady FUNC

    function noranTelPresent() {
      if ( document.getElementById( 'noranTelPresentNo' ).checked ) {
        document.getElementById( 'buttonNoranTelChecks' ).disabled = true;
        document.getElementById( 'noranTelChecksOk' ).disabled = true;
        document.getElementById( 'noranTelChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonNoranTelChecks' ).disabled = false;
        document.getElementById( 'noranTelChecksOk' ).disabled = false;
        document.getElementById( 'noranTelChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      noranTelPresent(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "noranTelPresent" ]' ).on( "click", noranTelPresent );
    }); // close docReady FUNC

    function powerPlantPresent() {
      if ( document.getElementById( 'powerPlantPresentNo' ).checked ) {
        document.getElementById( 'buttonPowerPlantChecks' ).disabled = true;
        document.getElementById( 'powerPlantChecksOk' ).disabled = true;
        document.getElementById( 'powerPlantChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonPowerPlantChecks' ).disabled = false;
        document.getElementById( 'powerPlantChecksOk' ).disabled = false;
        document.getElementById( 'powerPlantChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      powerPlantPresent(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "powerPlantPresent" ]' ).on( "click", powerPlantPresent );
    }); // close docReady FUNC

    function batteryRackCabinetPresent() {
      if ( document.getElementById( 'batteryRackCabinetPresentNo' ).checked ) {
        document.getElementById( 'buttonBatteryRackCabinetChecks' ).disabled = true;
        document.getElementById( 'batteryRackCabinetChecksOk' ).disabled = true;
        document.getElementById( 'batteryRackCabinetChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonBatteryRackCabinetChecks' ).disabled = false;
        document.getElementById( 'batteryRackCabinetChecksOk' ).disabled = false;
        document.getElementById( 'batteryRackCabinetChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      batteryRackCabinetPresent(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "batteryRackCabinetPresent" ]' ).on( "click", batteryRackCabinetPresent );
    }); // close docReady FUNC

    function bbu1Present() {
      if ( document.getElementById( 'bbu1PresentNo' ).checked ) {
        document.getElementById( 'buttonBbu1Checks' ).disabled = true;
        document.getElementById( 'bbu1ChecksOk' ).disabled = true;
        document.getElementById( 'bbu1ChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonBbu1Checks' ).disabled = false;
        document.getElementById( 'bbu1ChecksOk' ).disabled = false;
        document.getElementById( 'bbu1ChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      bbu1Present(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "bbu1Present" ]' ).on( "click", bbu1Present );
    }); // close docReady FUNC

    function bbu2Present() {
      if ( document.getElementById( 'bbu2PresentNo' ).checked ) {
        document.getElementById( 'buttonBbu2Checks' ).disabled = true;
        document.getElementById( 'bbu2ChecksOk' ).disabled = true;
        document.getElementById( 'bbu2ChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonBbu2Checks' ).disabled = false;
        document.getElementById( 'bbu2ChecksOk' ).disabled = false;
        document.getElementById( 'bbu2ChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      bbu2Present(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "bbu2Present" ]' ).on( "click", bbu2Present );
    }); // close docReady FUNC

    function bbu3Present() {
      if ( document.getElementById( 'bbu3PresentNo' ).checked ) {
        document.getElementById( 'buttonBbu3Checks' ).disabled = true;
        document.getElementById( 'bbu3ChecksOk' ).disabled = true;
        document.getElementById( 'bbu3ChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonBbu3Checks' ).disabled = false;
        document.getElementById( 'bbu3ChecksOk' ).disabled = false;
        document.getElementById( 'bbu3ChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      bbu3Present(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "bbu3Present" ]' ).on( "click", bbu3Present );
    }); // close docReady FUNC

    function mdfPresent() {
      if ( document.getElementById( 'mdfPresentNo' ).checked ) {
        document.getElementById( 'buttonSiteAlarmMdfChecks' ).disabled = true;
        document.getElementById( 'siteAlarmMdfChecksOk' ).disabled = true;
        document.getElementById( 'siteAlarmMdfChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonSiteAlarmMdfChecks' ).disabled = false;
        document.getElementById( 'siteAlarmMdfChecksOk' ).disabled = false;
        document.getElementById( 'siteAlarmMdfChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      mdfPresent(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "mdfPresent" ]' ).on( "click", mdfPresent );
    }); // close docReady FUNC

    function towerLightsPresent() {
      if ( document.getElementById( 'towerLightsPresentNo' ).checked ) {
        document.getElementById( 'buttonTowerLightsChecks' ).disabled = true;
        document.getElementById( 'towerLightsChecksOk' ).disabled = true;
        document.getElementById( 'towerLightsChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonTowerLightsChecks' ).disabled = false;
        document.getElementById( 'towerLightsChecksOk' ).disabled = false;
        document.getElementById( 'towerLightsChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      towerLightsPresent(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "towerLightsPresent" ]' ).on( "click", towerLightsPresent );
    }); // close docReady FUNC

    function generatorPresent() {
      if ( document.getElementById( 'generatorPresentNo' ).checked ) {
        document.getElementById( 'buttonGeneratorChecks' ).disabled = true;
        document.getElementById( 'generatorChecksOk' ).disabled = true;
        document.getElementById( 'generatorChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonGeneratorChecks' ).disabled = false;
        document.getElementById( 'generatorChecksOk' ).disabled = false;
        document.getElementById( 'generatorChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      generatorPresent(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "generatorPresent" ]' ).on( "click", generatorPresent );
    }); // close docReady FUNC

    function tlanPresent() {
      if ( document.getElementById( 'tlanPresentNo' ).checked ) {
        document.getElementById( 'buttonTlanChecks' ).disabled = true;
        document.getElementById( 'tlanChecksOk' ).disabled = true;
        document.getElementById( 'tlanChecksNok' ).disabled = true;
      } else {
        document.getElementById( 'buttonTlanChecks' ).disabled = false;
        document.getElementById( 'tlanChecksOk' ).disabled = false;
        document.getElementById( 'tlanChecksNok' ).disabled = false;
      } // close IF
    } // close FUNC
    $( function() { // when page loads
      tlanPresent(); // run FUNC
      // when either radio is clicked, run the function
      $( 'input[ name = "tlanPresent" ]' ).on( "click", tlanPresent );
    }); // close docReady FUNC

  </script>

我知道它相当臃肿且不太高效，但正如我所说，我只是刚开始接触JS，所以我还有很多需要学习和改进的地方。

你能分享一下你的代码吗？ - Damien
你好，能分享一下代码吗？ - Sree Nath
4个回答
8

以下是使用纯JS的解决方案：

var form  = document.getElementById("formId");
var allElements = form.elements;
for (var i = 0, l = allElements.length; i < l; ++i) {
    // allElements[i].readOnly = true;
       allElements[i].disabled=true;
}

该 for 循环解析表单内的所有元素，并将 true 设置为它们的 disabled（或 readOnly）属性。这使得表单中的所有内容都变为 禁用。

以下是一个示例：

var form  = document.getElementById("formId");
var allElements = form.elements;
for (var i = 0, l = allElements.length; i < l; ++i) {
    // allElements[i].readOnly = true; 
       allElements[i].disabled=true;
}
<form id="formId">
  <textarea>write sth</textarea><br>
  <input type="text" /><br>
</form>

所以这是用来切换表单内元素的。但是我的表单中有分段在div内，我只想能够禁用/启用由div标识的表单部分，同时保持表单的其余部分不变。 - ejackd
readOnly 和 disabled 是不同的。当一个表单元素被设置为 disabled 时，不仅用户无法与其交互，而且如果表单被提交，那么这些被禁用的元素也不会包含在 GET 或 POST 参数中。 - Pointy
1
因此，最后一行应替换为allElements[i].disabled=true;。感谢 @Pointy 的提示。 - Shafizadeh
此外，readOnly 只适用于交互会改变元素实际 value 属性的表单元素，例如文本字段。在复选框或单选按钮上使用 readOnly 不会产生任何效果，也不会阻止用户切换它们。 - Lennholm
1
@Shafizadeh 谢谢你提供的链接。 - Damien
显示剩余2条评论
7

Use this document.querySelectorAll('form > *') .The will select all the innerElement of the form 

document.querySelectorAll('form > *').forEach(function(a){
a.disabled=true;
})
<form>
<input>
<input>
<input>
<select></select>
</form>

请注意，使用“>”将仅选择表单元素的直接子元素。在<form><div><input></div></form>中的输入不会被选择（据我所知）。 - Herbert Van-Vliet
0
你可以使用 document.getElementsByTagName("form").disabled = true;。
不可以，因为没有 getElementByTagName() 函数。正确的是 getElementsByTagName()，它返回一个 NodeList。 - Pointy
@Pointy 我已经更正了。我打字太快，漏掉了 s。 - Damien
2
它仍然无法工作。该函数的返回值不是一个元素，而是一个元素列表。您必须遍历该列表并禁用每个元素。（页面上可能只有一个<form>，但您仍然会收到一个列表。） - Pointy
正如@Pointy所述，将“disabled”属性添加到表单元素上不会产生任何效果。 - Lennholm
0

您可以使用循环来获取表单中的所有元素，然后将以下代码添加到每个元素：

elementFromForm.disabled = true;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接