title: pure javascript to disable all form elements inside div
body: <p>Is there a way to disable all fields (textarea/textfield/option/input/checkbox/submit etc) in a form by telling only the parent div name using pure javascript and not jquery or angular?</p>
  
  <p>I want pure javascript because I am just getting started with JS and I find all the different permutations quite confusing.</p>
  
  <hr>
  
  <p>I am currently doing something like, but would like streamline this:</p>
  
  <pre><code>  &lt;script type="text/javascript" charset="utf-8"&gt;
      ( 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
  
    &lt;/script&gt;
  </code></pre>
  
  <p>I know its quite bloated and not very efficient, but like I said I am just getting going with JS, so I have lots to learn to improve.</p>