mercredi 9 décembre 2020

Checkbox selected tick function

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>&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="rahsia" id="rahsia" value="1"><b> Rahsia</b></input>&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="sulit" id="sulit" value="1"><b> Sulit</b></input>&nbsp;&nbsp;&nbsp;<br>
<input type="checkbox" name="terhad" id="terhad" value="1"><b> Terhad</b></input>&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="terbuka" id="terbuka" value="1"><b> Terbuka</b></input>&nbsp;&nbsp;&nbsp;
</div>
</div>

Now my output result like below the picture can tick all the checkboxes:

output 1

My expected result like below the sample picture, just can tick 1 box in the checkbox. enter image description here

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