3

In SharePoint List, I have create Check boxes with three option in Choice Column.

Now, How to disable two options when one is selected in new form?

I tried by using this Link, but no use.

2 Answers 2

1

We can use Radio Buttons field to instead of Checkboxes field.

If you still want to use Checkboxes, we can add the following code to script editor web part(2013/online) or Content Editor Web part(2010/2013/Online) in new form page to achieve it. Note: Modify the field column name in the code below.

<script src="//code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function PreSaveAction(){
    var columnName="Checkboxes";
    if($(".ms-standardheader nobr:contains('"+columnName+"')").closest("tr").find("input[type='checkbox']:checked").length>1){
        alert("Only 1 selection allowed.");
        return false;
    }else{
        return true;
    }
}
</script>

enter image description here

2
  • I already tried this, but not working
    – san
    Jan 1, 2018 at 8:26
  • I modify the code above, don't forget modify the "columnName" in the code.
    – LZ_MSFT
    Jan 3, 2018 at 3:03
0

You can try this

<script type="text/javascript" src="/Javascript/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/Javascript/LimitSelectionsInCheckboxes.js"></script>
<script type="text/javascript">
initLimitSelections('YourFieldInternalName',1,'Only 1 selections allowed.');
</script>

Code in LimitSelectionsInCheckboxes.js

var multiChoiceFields = init_multiChoiceFields();

function initLimitSelections(FieldInternalName,allowedSelections,errorText){
    if(typeof errorText === "undefined" || errorText === ""){
        errorText = "You can only select " + allowedSelections + " options.";
    }
    $(multiChoiceFields[FieldInternalName]).find("input").click(function(){
        limitSelections($(this),FieldInternalName,allowedSelections,errorText);
    });
}

function limitSelections(currOpt,fin,n,errText){
    var f = $(multiChoiceFields[fin]), c, chk;
    $("#customMultiSelectValidation").remove();
    c = f.find("input:checked").length;
    // If allowedSelections = 1 move selection
    if(n === 1){
        chk = currOpt.prop("checked");
        f.find("input:checked").each(function(){
            $(this).prop("checked",false);
        });
        currOpt.prop("checked",chk);
    }else{
        // Uncheck current selection and give user a visual feedback on number of allowed selections
        if(c > n){
            currOpt.prop("checked",false);
            f.find("td[class^='ms-formbody']").append("<div id='customMultiSelectValidation' class='ms-formvalidation'>" + errText + "</div>");
            $("#customMultiSelectValidation").fadeOut(4000)
        }
    }
}

function init_multiChoiceFields(){
    var res = {}, myMatch, disp, fin, type;
    $("td[class^='ms-formbody']").each(function(){
    myMatch = $(this).html().match(/FieldName="(.+)"\s+FieldInternalName="(.+)"\s+FieldType="(.+)"\s+/);    
        if(myMatch!=null){
            // Display name
            disp = myMatch[1];
            // FieldInternalName
            fin = myMatch[2];
            // FieldType
            type = myMatch[3];
            if(type!=='SPFieldMultiChoice'){
                return;
            }       
            // Build object
            res[fin] = this.parentNode;
            $(res[fin]).attr('FieldDispName',disp);
            $(res[fin]).attr('FieldType',type);
        }       
    });
    return res;
}

Reference

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.