I have 5 checkboxes, I want to tick 1 checkbox then the other 4 checkboxes will disable to tick, if I untick the 1 checkbox, the other 4 checkboxes will able to tick. Hope someone can guide me on how to solve it based on my below the coding:
<div class="form-group" id="taraf_keselamatan_fail">
<label for="cp1" class="control-label col-lg-4">Taraf Keselamatan Fail:</label>
<div class="col-lg-3">
<input type="checkbox" name="rahsia_besar" id="rahsia_besar" value="1"><b> Rahsia Besar</b></input>
<input type="checkbox" name="rahsia" id="rahsia" value="1"><b> Rahsia</b></input>
<input type="checkbox" name="sulit" id="sulit" value="1"><b> Sulit</b></input> <br>
<input type="checkbox" name="terhad" id="terhad" value="1"><b> Terhad</b></input>
<input type="checkbox" name="terbuka" id="terbuka" value="1"><b> Terbuka</b></input>
</div>
</div>
Now my output result like below the picture can tick all the checkboxes:
My expected result like below the sample picture, just can tick 1 box in the checkbox.
This is my try the coding in the javascript, but it cannot work:
<script>
var form = document.getElementById("checkForm");
form.onclick = delegateFormClick;
addChangeHandlers(form);
function addChangeHandlers(form)
{
for(var i=0;i<form.elements.length;i++)
{
var element = form.elements[i];
if(element.tagName === "INPUT" && element.type === "checkbox")
{
if(!element.onchange)
{
element.onchange = checkBoxChanged;
}
}
}
}
function delegateFormClick(evt)
{
var target;
if(!evt)
{
//Microsoft DOM
target = window.event.srcElement;
}else if(evt)
{
//w3c DOM
target = evt.target;
}
if(target.nodeType === 1 && target.tagName === "INPUT" && target.type === "checkbox")
{
if(target.checked)
{
disableCheckBoxes(target.id, document.getElementById("checkForm"));
}else if(!target.checked)
{
enableCheckBoxes(document.getElementById("checkForm"));
}
}
}
function checkBoxChanged()
{
if(this.checked)
{
disableCheckBoxes(this.id, document.getElementById("checkForm"));
}else if(!this.checked)
{
enableCheckBoxes(document.getElementById("checkForm"));
}
}
function disableCheckBoxes(id, form)
{
var blacklist = [];
if(id)
{
switch(id)
{
case "rahsia_besar":
blacklist = ["rahsia", "sulit","terhad","terbuka"];
break;
case "rahsia":
blacklist = ["rahsia_besar", "sulit","terhad","terbuka"];
break;
case "sulit":
blacklist = ["rahsia_besar", "rahsia","terhad","terbuka"];
break;
case "terhad":
blacklist = ["rahsia_besar", "rahsia","sulit","terbuka"];
break;
case "terbuka":
blacklist = ["rahsia_besar", "rahsia","sulit","terhad"];
break;
}
}else
{
throw new Error("id is needed to hard-wire input blacklist");
}
for(var i=0;i<blacklist.length;i++)
{
var element = document.getElementById(blacklist[i]);
if(element && element.nodeType === 1)
{
//check for element
if(element.tagName === "INPUT" && element.type === "checkbox" && !element.checked)
{
element.disabled = "disabled";
}
}else if(!element || element.nodeType !== 1)
{
throw new Error("input blacklist item does not exist or is not an element");
}
}
}
function enableCheckBoxes(form)
{
for(var i=0;i<form.elements.length;i++)
{
var element = form.elements[i];
if(element.tagName === "INPUT" && element.type === "checkbox" && !element.checked)
{
element.disabled = "";
}
}
}
</script>
Aucun commentaire:
Enregistrer un commentaire