Form able / disable

gistfile1.txt

<!-- Payment options -->
       <div id="payment-methods">
          <!-- Payment Form -->
          <form id="paytment-form" action="index.html" method="post">
            <!-- Online Payments -->
            <div id="online-payments" class="payments" >
               <input type="radio" id="onlinePayInput" name="payment-method" value="bank-A" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false"> <span class="option">線上付款</span> <br>
            </div>
              <!-- Online Payment Methods -->
              <div id="online-options" style="display: none;">
                <div class="online-option" >
                  <input type="radio" name="payment-option" value="Credit Card" class="online-input">
                  <span class="payInfo" id="payInfoCredit"><p>Credit card</p></span>
                  <div class="payLogo" id="creditCard">
                    <img src="visa-master.png" alt="">
                  </div>
                </div>
                <div class="online-option" >
                  <input type="radio" name="payment-option" value="Credit Card" class="online-input">
                  <span class="payInfo" id="payInfoSeven"><p>7-Eleven</p></span>
                  <div class="payLogo" id="sevenLogo">
                    <img src="seven11.png" alt="">
                  </div>
                </div>
                <div class="online-option" >
                  <input type="radio" name="payment-option" value="Credit Card" class="online-input">
                  <span class="payInfo"><p>Online banking</p></span>
                  <div class="payLogo">
                    <img src="bank-logos.png" alt="">
                  </div>
                </div>
              </div>
            <!-- Offline Payments -->
            <div id="offline-payments" class="payments">
              <input type="radio" id="offlinePayInput" name="payment-method" value="bank-D" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false"> <span class="option">線下付款</span> <br>
            </div>
              <!-- Offline Payment Methods -->
              <div id="offline-options" style="display: none;">
                <div class="offline-option">
                  <input type="radio" name="payment-option" value="bank-E" class="offline-input">
                  <span class="bankName">Cimb Bank</span>
                  <div class="payLogo" id="cimbBank">
                    <img src="cimb-bank-logo-sm.png" alt="">
                  </div>
                  <div class="payInfoOff">
                    <p class="bankAcc"><span class="bankAccDet">Account</span>: 80-0327458-9 <br>
                      <span class="bankAccDet">Bank</span>: Cimb Bank <br>
                      <span class="bankAccDet">Name</span>: Peoples Map Sdn Bhd.</p>
                  </div>
                </div>
                <div class="offline-option">
                  <input type="radio" name="payment-option" value="bank-F" class="offline-input">
                  <span class="bankName">Public Bank</span>
                  <div class="payLogo" id="publicBank">
                    <img src="Public-Bank-logo-sm.png" alt="">
                  </div>
                  <div class="payInfoOff">
                    <p class="bankAcc"><span class="bankAccDet">Account</span>: 3201174410 <br>
                      <span class="bankAccDet">Bank</span>: Public Bank <br>
                      <span class="bankAccDet">Name</span>: Peoples Map Sdn Bhd.</p>
                  </div>
                </div>

              </div>
          </form>
       </div>
       
/****** Payment form script ******/

var onlinePayments = document.getElementById("online-payments");
var offlinePayments = document.getElementById("offline-payments");
var onlineInput = document.getElementsByClassName("online-input");
var offlineInput = document.getElementsByClassName("offline-input");
var onlineOptions = document.getElementById("online-options");
var offlineOptions = document.getElementById("offline-options");
var onlinePayInput = document.getElementById("onlinePayInput");




onlinePayments.onclick = function(){
  onlinePayTab();
}

offlinePayments.onclick = function() {
  offlinePayTab();
}

function onlinePayTab() {
  if(onlinePayInput.checked===true) {
    onlineOptions.style.display = "block";
    offlineOptions.style.display = "none";
    for(var i=0; i<offlineInput.length; i++) {
        offlineInput[i].setAttribute("disabled", "");
    }
    for(var i=0; i<onlineInput.length; i++) {
        onlineInput[i].removeAttribute("disabled");
    }
  } else {
    onlineOptions.style.display = "none";
  }
}

function offlinePayTab() {
  if (offlinePayInput.checked===true) {
    offlineOptions.style.display = "block";
  	for(var i=0; i<onlineInput.length; i++) {
  	  onlineInput[i].setAttribute("disabled", "");
    }
    onlineOptions.style.display = "none";
  	for(var i=0; i<offlineInput.length; i++) {
      	offlineInput[i].removeAttribute("disabled");
    }

  } else {
    offlineOptions.style.display = "none";

  }
}

/****** css ******/

/*Payment Methods*/
.page-main #payment-methods {
	margin: 3% 4% 0 4%;
	height: auto;
}

.page-main #payment-methods .payments {
	border: 1px solid #efefef;
	background-color: #eee;
	color: #6d6b6b;
	padding: 2%;
}

.page-main .option {
	padding-left: 3%;
	font-size: 1.2em;
}

.online-option p {
	font-weight: bold;
	font-style: italic;
	font-size: 1em;
}

span.bankName{
	font-weight: bold;
	font-style: italic;
	margin-left: 4%;
}

p.bankAcc {
	padding-left: 5%;
	font-size: 0.9em;
}

span.bankAccDet {
	font-weight: bold;
}

.page-main #payment-methods .online-option, .offline-option {
	border: 1px solid #efefef;
	background-color: #fff;
	color: #6d6b6b;
	padding: 2% 2% 2% 4%;
}

span.payInfo {
	display: inline-block;
	margin-left: 1%;
}

span.payInfo p{
	margin: 0 0 1% 0 !important;
}

div.payInfoOff {
	display: inline-block;
	width: 90%;
	height: auto;
	margin: 0 0 0 10%;
}

div.payInfoOff p{
	margin: 0 0 1% 0 !important;
}

div.payLogo {
	display: inline-block;
	width: 95%;
	height: auto;
	margin-left: 5%;
}

div.payLogo img {
	height: auto;
	width: 100%;
}

div#creditCard {
	width: 40%;
	height: auto;
}

div#sevenLogo {
	width: 12%;
	height: auto;
}

div#cimbBank.payLogo {
	width: 35%;
	height: auto;
}

div#publicBank.payLogo {
	width: 40%;
	height: auto;
}