CSS If Statement

[RonAnderson]

Hi,

I have a field [Value] in my submission datapage which will contain either "Yes" of "No". If [Value] = "Yes" then I want another field [Count] to be read only. If [Value] = "No" then I want the [Count] field to be editable.

I found this code which works perfectly but I need it to handle both conditions

<style>
input[name*="Count"]
{
pointer-events: none !important;
}
</style>

I'm a total novice with CSS syntax so I'd be grateful for any help with this.

[ParkLoey]

Hi @RonAnderson! I can totally relate because I'm not that familiar with CSS as well Have you tried using Rules instead? It can hide,  disable, required, and make a field/section as read-only based on conditions. 

https://howto.caspio.com/datapages/forms/conditional-forms/

This is a much easier approach instead of css. I hope this helps!

[RonAnderson]

Hi @ParkLoey and thanks for responding so quickly. I tried using rules but because the Count field has been used in another rule it fails to appear in the "Select Field". I don't want to go down the path of restructuring the  rules because they took ages to build and I don't want to unravel them. I may have to do this if I can't get a code solution.

[RonAnderson]

Hi @ParkLoey, I looked at your advise in more detail and it worked. I created a new section and made the conditions control the section rather than the field with no impact on my existing elements. Great stuff and thanks.

[cheonsa]

You can also use JavaScript to disable a field:

<script type="text/javascript">
var field = document.getElementsByName('InsertRecordField')[0];
field.addEventListener('change', function() {

if(field.value == "Yes"){
document.querySelector("[id*='InsertRecordCount']").readOnly = true;
}
else{
document.querySelector("[id*='InsertRecordCount']").disabled = false;
}
});
</script>

Please note to change Field and Count in the InsertRecordField and InsertRecordCount according to your correct field names.