add option to disable checkbox to prevent changing status [document the CSS snippets/cssclasses approach]

[eatgrass]

⚠️ Please check that this feature request hasn't been suggested before.

• [X] I searched previous Ideas in Discussions didn't find any similar feature requests.
• [X] I searched previous Issues didn't find any similar feature requests.
• [X] I am only requesting a single feature. Multiple changes should be split into individual requests, with links between them.
• [X] I believe my requested feature will be generally applicable to other users, not just me: it is not uniquely tied to my personal workflow.

🔖 Feature description

I have a page for reviewing tasks without changing their status. However, sometimes, the checkbox gets accidentally clicked during the review. I am currently using this code snippet:

done
path includes {{query.file.folder}}
tags includes #task 
group by done
hide tags
hide edit button
hide done date
hide due date
short mode

✔️ Solution

It would be useful to have a 'disable checkbox' option to prevent click events in live-preview and reading mode.

❓ Alternatives

No response

📝 Additional Context

No response

[claremacrae]

There is probably a way to implement this in CSS without needing any changes to Tasks.

1. Use the Tasks Styling to figure out the way to customise the checkbox
2. First figure out the CSS to make the checkbox ignore any clicks
3. Use Obsidian's cssclasses property to create a CSS snippet that is specific to a particular class
4. Then add that class to the cssclasses property of every file that you want to have inactive checkboxes.

If you need help with this, the #appearance channel in Obsidian Discord may be able to help.

Please report back if you get anything working. Thanks.

[eatgrass]

@claremacrae Thank you for the suggestion. I will definitely try it out.

[eatgrass]

I'd like to share this solution here for those with similar requirements.

1. Create a custom css snippet

.lock-tasks .task-list-item input[type="checkbox"] {
  pointer-events: none;
}

2. Add lock-tasks to the cssclasses property of the document to disable the checkbox.

[claremacrae]

Hi @eatgrass, wow that works great. Thanks very much indeed.

I'll re-open this until I've been able to write it up in the documentation.