+6
I have a repeating section that includes a yes/no checkbox and a single line text box. The text box if for users to manually add to a project task list. I want the entry in the text box to change formatting (strike through, turn grey, something) when the yes/no box is checked. This doesn't work and I cannot find any documentation around this.
Best answer by chaitra_b_c
View original
+8
Try following the below steps:
Inside ready function write onChange event on Yes/No field set the CSS Class defination as required:
NWF$(document).ready(function () {
var opt= NWF$("#" + chkOption);
opt.change(function(){
var optSelected = opt.find('input:checked').val();
if(optSelected == 0)
{
//set CSS Class defination for the text displayed in the TextBox
}
else
{
//set CSS Class defination for the text displayed in the TextBox
}
});
+6
Chaitra B C, thanks for the response but this is a bit over my head. I'm learning as I go. I tried, but couldn't get it to work off the bat so, a few questions.
1. What would the JS Variable names be for the Check Box and Text box?
2. Do I "set CSS Class to Text box field" in both the checkbox AND the Tex box or only one?
a. Do I actually type "Text box"?
3. Should the JS I put in by form properties be exactly what you posted above except "//set CSS Class definition for the displayed in the Text Box" or is there some other portions of the code I'm missing?
a. Could you clue me in on the replacement code for "//set CSS Class definition for the text displayed in the Text Box"? I want no customization when the box is unchecked and a strike trough when it is.
Also, there will be several of these lines of check boxes and text boxes. I assume I will need a certain section of the code repeated for each one correct?
Thanks for your insight. Sorry to have to ask what may be simple questions..
CB
+8
Answer to Q 1:
Answer to Q 2: Since you want to style only the text in the textbox, having a CSS Class in Textbox is required.
Answer for Q 3: CSS Class definition should be like:
.mytxt{
text-decoration: line-through;
}
For the textbox where you wish to have the different text styling based on the Checkbox selection follow the above steps, but ensure you use unique JS variable name and CSS class name (if the styling varies).
+6
So I mashed up your original code in your first post with the CSS class definition from your last post and I keep getting an error. I have tried several ways to "Correct" it, but I just don't know JS that well. A few questions/observations:
1) I added the ".mytxt" css code and left it encalsuplarted in "//" for clarity in this post. I assume "//" are just notes that JS doesn't try to run.
a. I added the ".mytxt" code into the true and the "Else" portion of the "If" code just to get it working.
b. Should ".mytxt" be ".myTxtCss" to match the CSS Class I added to the text box?
2) the code below is missing a ")" somewhere, assuming you need one for each "(", but I cannot figure out where it should go.
3) the code below is missing a "}" somewhere, assuming you need one for each "{", but I cannot figure out where it should go.
NWF$(document).ready(function () {
var opt= NWF$("#" + chkOption);
opt.change(function(){
var optSelected = opt.find('input:checked').val();
if(optSelected == 0)
{
//set CSS Class definition for the text displayed in the TextBox
.mytxt{
text-decoration: line-through;
}
//
}
else
{
//set CSS Class definition for the text displayed in the TextBox
.mytxt{
text-decoration: line-through;
}
//
}
});
You can apply formatting rules for this requirement, but its will not work for Yes/No type field because by default that value has been set to default value, so we can't use conditions for rendering the format.
For workaround you can create choice field with checkbox and name the choice value as a Yes/No. Look in the below screen prints what I did.
1. I have created a choice field with Yes/No
2. I have added rule for the text box with condition not empty(Yes/No). If yes/No is not empty then the textbook value will be Disable(grey out). you can use the format to strike too as shown in the below screen print but strike will show up only on the "View/Display Form"
not selected Yes/No
Selected Yes/No and text box disabled
I hope this helps! Let me know if you have any questions.
Thank You!
+8
Below is working code:
NWF$(document).ready(function () {
var opt= NWF$("#" + chkOption);
opt.change(function(){
if(opt.prop('checked')) //since its a check-box the checked property will return the value
{
NWF$("#" + txtTitle).prop('class','myTxtCss'); //to apply CSS class to a control
}
else
{
NWF$("#" + txtTitle).prop('class','ms-spellcheck-true nf-associated-control');
}
});
});
You can change the .myTxtCss definition written in Custom CSS section as per your needs.
+6
Aparna,
Did you try to alter formatting with this method too? I did not get the strike through to work for me when I tried.
+6
Chaitra,
Thanks. This helps me understand a little bit better how the functions all interact as well as solving my issue.
Yes, you can strike through text as shown below. But unfortunately strike through text showing only on display/view form. If you want to show strikethrough in all modes, then Chaitra's solution works best. Mine is no code solution out of box.
You need to select strike through format as shown below. Here am using both formats in one rule Disable and strike through!
Thank You!
+6
I see now and got it working in view mode. Thanks again.
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.