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>
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 | |
  • 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. – SamB May 15 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_MSFT May 18 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, privacy policy and cookie policy

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