0

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>
Improve this question

2 Answers 2

Reset to default
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>

enter image description here

Improve this answer
2
  • That's great, thanks @Jerry_MSFT. I also need to make Field 7 read only which I have added into the above code. However, is it possible to only make these fields read only once the item has been saved rather than instantly? Just thinking that it is highly likely there are going to be times where Field 7 is accidentally/prematurely checked.
    – user69394
    Commented May 15, 2020 at 9:42
  • When the item has been saved by clicking Save button, it will redirect to AllItems.aspx page, so no need to make these fields read only in New Form. Instead, you can add the code above in a Edit Form so that the fields will be read only based on the checkbox checked/unchecked.
    – Jerry
    Commented May 18, 2020 at 8:43
1

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?

Improve this answer

Your Answer

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

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