Make SharePoint Online list columns read only based on yes/no checkbox

Question

I have 7 columns that I need to make Read Only (greyed out) as soon as the item is saved when "Field 7" is ticked (yes/no checkbox column).

I have managed to make these 7 columns read only using the following Javascript, however I am struggling with the IF statement. Any help would be appreciated.

    <script>
// A $( document ).ready() block.
$( document ).ready(function() {
    jQuery("input[title='Field 1']").attr("disabled", "disabled"); 
    jQuery("input[title='Field 2']").attr("disabled", "disabled");
    jQuery("input[title='Field 3']").attr("disabled", "disabled");
    jQuery("input[title='Field 4']").attr("disabled", "disabled");
    jQuery("input[title='Field 5']").attr("disabled", "disabled");
    jQuery("textarea[title='Field 6']").attr("disabled", "disabled");
    jQuery("input[title='Field 7']").attr("disabled", "disabled");
    }
);
</script>

<script language="javascript"> $(function(){ $('a[onclick*="clickDatePicker"]').css('display','none'); }); </script>

Answer 1

Here is the modified code to check if the checkbox checked and enable/disable by checkbox changed:

<script type="text/javascript">
$( document ).ready(function() {
if($("input[title='Field 7']").is(":checked"))
{
                jQuery("input[title='Field 1']").attr("disabled", true); 
                jQuery("input[title='Field 2']").attr("disabled", true);
                jQuery("input[title='Field 3']").attr("disabled", true);
                jQuery("input[title='Field 4']").attr("disabled", true);
                jQuery("input[title='Field 5']").attr("disabled", true);
                jQuery("textarea[title='Field 6']").attr("disabled",true);

}

$("input[title='Field 7']").change(function() {
        if($(this).is(':checked')) {
                jQuery("input[title='Field 1']").attr("disabled", true); 
                jQuery("input[title='Field 2']").attr("disabled", true);
                jQuery("input[title='Field 3']").attr("disabled", true);
                jQuery("input[title='Field 4']").attr("disabled", true);
                jQuery("input[title='Field 5']").attr("disabled", true);
                jQuery("textarea[title='Field 6']").attr("disabled",true);
            } 
           else
           {
                jQuery("input[title='Field 1']").attr("disabled", false); 
                jQuery("input[title='Field 2']").attr("disabled", false);
                jQuery("input[title='Field 3']").attr("disabled", false);
                jQuery("input[title='Field 4']").attr("disabled", false);
                jQuery("input[title='Field 5']").attr("disabled", false);
                jQuery("textarea[title='Field 6']").attr("disabled", false);

           }   
    });

});
</script>

Answer 2

You can add the IF condition like below:

$("input[id ^= 'YourCheckboxFieldName']").is(function()
{
    var isChecked = $(this).is(":checked");  //This will return True or False
    var theVal = $(this).next().text();    //get the label for this checkbox
    alert(checked + " : " + theVal);
});

In your code you can add like below:

if (isChecked === true)
{
   jQuery("input[title='Field 1']").attr("disabled", "disabled"); 
    jQuery("input[title='Field 2']").attr("disabled", "disabled");
    jQuery("input[title='Field 3']").attr("disabled", "disabled");
    jQuery("input[title='Field 4']").attr("disabled", "disabled");
    jQuery("input[title='Field 5']").attr("disabled", "disabled");
    jQuery("textarea[title='Field 6']").attr("disabled", "disabled");
    jQuery("input[title='Field 7']").attr("disabled", "disabled");
    }

}

Reference:

Accessing a SharePoint 2013 checkbox with JavaScript?