JavaScriptの基本的な知識があるので、次のような操作をしたいと思います。
支払いに2つのオプションを与える2つのラジオボタンを使用することによって:
- 現金で
- チェックで
ユーザーが現金のラジオボタンを選択した場合、小切手ボタンも無効になり、小切手番号や銀行名などの詳細が記載されている小切手のDivも無効になります。
そしてビザVersa
JQueryを使用せずにそれを行う方法はありますか?(divを無効にし、すべてのコンテンツも無効にします)
助けてくれてありがとう。
JavaScriptの基本的な知識があるので、次のような操作をしたいと思います。
支払いに2つのオプションを与える2つのラジオボタンを使用することによって:
ユーザーが現金のラジオボタンを選択した場合、小切手ボタンも無効になり、小切手番号や銀行名などの詳細が記載されている小切手のDivも無効になります。
そしてビザVersa
JQueryを使用せずにそれを行う方法はありますか?(divを無効にし、すべてのコンテンツも無効にします)
助けてくれてありがとう。
これを試して:
document.getElementById("myDivId").disabled = true;
div 内のすべての要素を無効にするには、次のようにします。
var allChildNodes = document.getElementById("myDivId").getElementsByTagName('*');
for(var i = 0; i < allChildNodes.length; i++)
{
allChildNodes[i].disabled = true;
}
このコードは、指定されたコンテナー内のすべての要素を無効にします。
var container = document.getElementById("cashContainer");
var inputs = document.getElementsByTagName("input").concat(document.getElementsByTagName("select"));
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
同じコードを適用すると、他のコンテナーを再度有効にすることができます。
<fieldset disabled="true">
<div>
<input type="text" />
</div>
<br>
<div>
<input type="text" />
</div>
<br>
<div>
<input type="text" />
</div>
<br>
</fieldset>
あなたはこれを試すことができます
HTML
<input type="radio" name="cashcheck" value="cash" checked />Cash<br />
<div id="cash">
<form method="post">
<input type="text" name="cashTxt1" />
<input type="text" name="cashTxt2" />
</form>
</div>
<input type="radio" name="cashcheck" value="check" />Check<br />
<div id="check">
<form method="post">
<input type="text" name="checkTxt1" disabled />
<input type="text" name="checkTxt2" disabled />
</form>
</div>
JS
window.onload=function(){
var radios = document.getElementsByName('cashcheck');
radios[0].onchange=toggle;
radios[1].onchange=toggle;
};
function toggle()
{
if(this.checked)
{
var div = document.getElementById(this.value),
inputs = div.getElementsByTagName('form')[0].getElementsByTagName('*');
for( var i=0; i<inputs.length; i++)
{
inputs[i].removeAttribute('disabled');
}
var op = this.value == 'cash' ? 'check' : 'cash',
divOp = document.getElementById(op),
divOpInputs = divOp.getElementsByTagName('form')[0].getElementsByTagName('*');
for( var i=0; i<divOpInputs.length; i++)
{
divOpInputs[i].setAttribute('disabled');
}
}
}