Disabling/Enabling checkbox should disable Input field

Question

I have a panel that display a text box and a check box. AIM1: I want to grayed out input field if check box is selected. And when page is loaded both should be open to use but once selected either one, other should clear its selection and gray out.

I tired Javascript/jquery nothing is working. I am not understanding why.

   <apex:panelGrid columns="5" id="theGrid" width="80%">
      <apex:outputLabel > A  </apex:outputLabel>
      <apex:inputfield id="idAText" value="{!ttlookup.a}" />
      <apex:inputCheckbox id="checkBoxAId" value="{!Acheckbox}" onchange="tt(this);"/>
      <apex:outputLabel >&nbsp; &nbsp;</apex:outputLabel>
      <apex:outputLabel > Check </apex:outputLabel>

      <apex:outputLabel >B  </apex:outputLabel>
      <apex:inputfield id="idRMText" value="{!ttlookup.B}" />
      <apex:inputCheckbox id="checkBoxBId" value="{!Bcheckbox}"/>
      <apex:outputLabel >&nbsp;&nbsp;</apex:outputLabel>
      <apex:outputLabel > Check </apex:outputLabel>

      <apex:outputLabel > B   </apex:outputLabel>
      <apex:inputfield id="idRMText" value="{!ttlookup.B}" />
      <apex:inputCheckbox id="checkBoxBId" value="{!Bcheckbox}"/>
      <apex:outputLabel >&nbsp; &nbsp;</apex:outputLabel>
      <apex:outputLabel > Check </apex:outputLabel>

    </apex:panelGrid> 
  <script type="text/javascript">

   function tt(chkboxCtrl) {

        var Aid = $("[id*=checkBoxAId]").is(':checked');
        alert(Aid);
        try {
                if( chkboxCtrl.checked ) {
                    $("[id*=idAText").style.display = 'none';
                }
                else {
                    $("[id*=idAText").style.display = 'inline';
                }
        }
        catch(e) {
            alert(e);
        }
    }

</script>

if i can change this

if( chkboxCtrl.checked ) {
     $("[id*=idAText").css("display", "none");
}else {
 $("[id*=idAText").css("display", "block");
}

see below images

Can you confirm that jQuery is correctly loaded before your JavaScript? — Keith C
– Keith C, Commented Oct 22, 2018 at 7:58
In the apex:inputCheckbox, onchange event handler remove {!}. Eg. onchange="toggledDisplay();" — Ranga
– Ranga, Commented Oct 22, 2018 at 8:01
@Ranga sorry it is Typo I manually wrote the code here. I will edit it. problem still exits. — Mentee
– Mentee, Commented Oct 22, 2018 at 8:08
Is your alert showing something? i.e Is it finding the correct dom element? Also consider putting your js script inside onload function. Eg. $( document ).ready(function() { //your js function }); — Ranga
– Ranga, Commented Oct 22, 2018 at 8:10

ksugiarto · Accepted Answer · 2019-02-11 10:24:14Z

2

var TMid = $("[id*=checkBoxTMId]").is(':checked'); in this, I don't see "checkBoxTMId" Id assigned to any checkbox.

If you want to gray out the field then, in this case, you can set disabled to true for the input field. Please refer below snippet for the reference-

<apex:inputfield id="idAText" styleclass="inputFieldToDisable" value="{!ttlookup.a}" />
<apex:inputCheckbox id="checkBoxAId" styleClass="frstCheckbox" value="{!Acheckbox}" onchange="disableField(this)" />

<style>
    function disableField(e) {
        var fild = document.getElementsByClassName("inputFieldToDisable");
        if(e.checked) {
            fild[0].disabled = true;
            fild[0].value = '';
        } else {
            fild[0].disabled = false;
        }
    }
</style>

edited Feb 11, 2019 at 10:24

ksugiarto

1033 bronze badges

answered Oct 22, 2018 at 9:27

pranaya bhoyar

1665 bronze badges

1) It is Typo error I modified the post for other 2) do you know why document.getElementById(..) did not work?

Mentee
– Mentee

2018-10-22 09:32:59 +00:00
Commented Oct 22, 2018 at 9:32
We can use document.getElementById(..) although salesforce internally changes the Id for the tags. You can check Id value changed from browser console by using inspect element.

pranaya bhoyar
– pranaya bhoyar

2018-10-22 09:43:01 +00:00
Commented Oct 22, 2018 at 9:43

Add a comment |

Ranga · Accepted Answer · 2018-10-22 09:46:18Z

It is best practise to use Salesforce inbuilt functionality rather than using JS based solutions. This will avoid having to maintain code to support different browsers etc. We can do something like,

VF page:

<apex:panelGrid columns="5" id="theGrid" width="80%"> 
<apex:outputLabel > A </apex:outputLabel> 
<apex:inputfield id="idAText" value="{!ttlookup.a}" /> 

<apex:inputCheckbox value="{!Acheckbox}"> 
<apex:actionSupport event="onchange" action="{!toggleFields}" rerender="idRMText1,idRMText2" /> 
</apex:inputCheckbox> 

<apex:outputLabel > Check </apex:outputLabel> 

<apex:outputLabel>B </apex:outputLabel> 
<apex:inputfield id="idRMText1" value="{!ttlookup.B}" rendered="{!!fieldToggled}"/> 
<apex:outfield id="idRMText2" value="{!ttlookup.B}" rendered="{!fieldToggled}"/> 
</apex:panelGrid>

Apex Class:

public class PageController { 

public Boolean fieldToggled {get;set;} 

public PageController() { 
fieldToggled = false; 
} 

public void toggleFields() { 
fieldToggled = !fieldToggled; 
} 
}

Stack Exchange Network

Disabling/Enabling checkbox should disable Input field

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Disabling/Enabling checkbox should disable Input field

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions