1

I created a visualforce page wherein a text field (disabled in default) must be enabled when a checkbox is equal to true, while it must be disabled when checkbox is equal to false.

I don't have any problem with this requirement as I am getting the correct result.

The only thing I have problem with is that when I select a checkbox from the the first row, Text__c fields from other table rows are affected as well.

How can I make sure that Text__c fields from rows with selected checkboxes only are affected?

Here's what I have so far:

Apex Class:

public class NewClass {

    public ObjectA__c aDetails{get;set;}
    public List<ObjectB__c> bItemList{get;set;}

    public NewClass(){
        getLineItems();
    }

    public void getLineItems(){
        bItemList = new List<ObjectB__c>();
        aDetails = new ObjectA__c();
        aDetails = [SELECT Id, Field1__c FROM ObjectA__c WHERE Field1__c =: ApexPages.currentPage().getParameters().get('id') LIMIT 1];
        bItemList = [SELECT Id, Name, Field1__c, Field2__c, Text__c, Checkbox__c FROM ObjectB__c WHERE Field1__c =: ApexPages.currentPage().getParameters().get('id')];
    }

    public PageReference save(){
         if(!bItemList.isEmpty()) {
             try{
                 update bItemList;
             }catch(Exception ex){
                 system.Debug(ex.getMessage());
                 ApexPages.Message msg = new ApexPages.Message(Apexpages.Severity.ERROR, ex.getdmlMessage(0) );
                 ApexPages.addMessage(msg);
                 return null;
             }

         }
         PageReference Page = new PageReference('/'+ApexPages.currentPage().getParameters().get('id'));
         return Page;
    }
}

Visualforce Page:

<apex:page controller="NewClass" showHeader="false" standardStylesheets="false">

    <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"/> 
    <apex:includeScript value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"/>      

    <apex:form>
        <apex:pageMessages />
        <div class="container">

        <apex:pageBlock>

            <apex:pageBlockSection columns="1">
                <apex:outputPanel>
                    <apex:pageBlockSection columns="1">
                        <apex:pageBlockTable value="{!bItemList}" var="b">
                            <apex:column headerValue="Text">
                                    <apex:inputText id="txtId" value="{!b.Text__c}" disabled="true"/>                          
                            </apex:column> 
                            <apex:column headerValue="Checkbox">
                                    <apex:inputcheckbox id="chkbx" value="{!b.Checkbox__c}"/>                                
                            </apex:column> 
                        </apex:pageBlockTable>
                    </apex:pageBlockSection>
                    <center>
                        <apex:outputPanel >
                            <apex:commandLink action="{!save}" value="Save"/> 
                        </apex:outputPanel>
                    </center>
                </apex:outputPanel>
            </apex:pageBlockSection>

        </apex:pageBlock>

        </div>            

    </apex:form>

    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>

    <!--<script type="text/javascript">
        var j$ = jQuery.noConflict();
        j$(document).ready(function() {
            j$('[id$=chkbx]').click(function() {
                if(j$(this).is(':checked')) {
                    j$('[id$=txtId]').removeAttr('disabled');  
                }
                else {
                    j$('[id$=txtId]').attr('disabled', 'disabled');
                }
            });
        });
    </script>-->  

    <script>
       var j$ = jQuery.noConflict(); 
       j$(document).ready(function() { 
          j$('[id$=chkbx]').click(function() { 
             console.log(); 
             if( this.checked == false ) { 
                j$(this).closest('tr').find('input[id$=txtId]')[0].removeAttribute("disabled"); 
             } 
             else { 
                j$(this).closest('tr').find('input[id$=txtId]')[0].setAttribute("disabled", "disabled"); 
             } 
       });  });
    </script>  
</apex:page>
1

Instead of calling up jQuery for this, you could do this with native Visualforce code:

<apex:outputPanel id="outputArea">

...

<apex:column headerValue="Text">
  <apex:inputText id="txtId" value="{!b.Text__c}" disabled="{!NOT(b.Checkbox__c)}" />
</apex:column> 
<apex:column headerValue="Checkbox">
  <apex:inputcheckbox id="chkbx" value="{!b.Checkbox__c}">
    <apex:actionSupport event="onchange" reRender="outputArea" />
  </apex:inputcheckbox>
</apex:column>

...

</apex:outputPanel>
| improve this answer | |
  • sfdcfox, I've actually tried this approach first before implementing jquery. This just makes the field disappear, which is far-different from disabling (greying out) the field. Also, jquery has helped me sort out the disabling/enabling requirement, which was the first ever challenge I've encountered before posting this other new topic. – curdual Mar 25 '18 at 19:16
0

It's because You are picking all the fields with "txtId" and making them disabled.

You can use prev() or Sibling() in the Jquery to get the elements and filter it with Id and them make it disabled.

$(this).siblings('input').removeAttr('disabled');
$(this).siblings('input').attr('disabled', 'disabled');
| improve this answer | |
  • Thanks for your immediate response! Can you show me how to do this, or do you have any samples that could help me apply this on my page? – curdual Mar 25 '18 at 17:33
  • ok . Give me some time. I will write and post it... – amidstCloud Mar 25 '18 at 17:34
  • I followed your example, but jquery is no longer disabling/enabling text field when I click the checkbox. Am I doing it right? j$(this).siblings('[id$=txtId]').removeAttr('disabled'); j$(this).siblings('[id$=txtId]').attr('disabled', 'disabled'); – curdual Mar 25 '18 at 18:12
0

My VF page is below

<apex:pageBlock>
   <apex:pageBlockSection columns="1">
      <apex:outputPanel>
        <apex:pageBlockSection columns="1">
          <apex:pageBlockTable id="rowclick2" value="{!bItemList}" var="b">
             <apex:column headerValue="Checkbox">
                <apex:inputcheckbox id="chkbx" value="{!b.Checkbox__c}" />                              
             </apex:column>
             <apex:column headerValue="Text">
                 <apex:inputText id="txtId" value="{!b.Text__c}" disabled="true"/>                            
             </apex:column> 
          </apex:pageBlockTable>
        </apex:pageBlockSection>
        <center>
          <apex:outputPanel >
            <apex:commandLink action="{!save}" value="Save"/> 
          </apex:outputPanel>
        </center>
        </apex:outputPanel>
   </apex:pageBlockSection>
</apex:pageBlock>

My JS is:

var j$ = jQuery.noConflict();
        j$(document).ready(function() {
            j$('[id$=chkbx]').click(function() {
                if( this.checked == false ) {
                    j$(this).closest('tr').find('td:last')[0].childNodes[0].removeAttribute("disabled");
                } else {
                    j$(this).closest('tr').find('td:last')[0].childNodes[0].setAttribute("disabled", "disabled");
                }
            });
        });

It worked for me and hope it helps.

| improve this answer | |
  • Hi Kumar. I was solving the same. I tried this but didn't work. What am I doing wrong.. $(this).closest("tr").find("#txtId").attr('disabled', 'disabled'); Going to closest tr and find the input with Id and disabling it. – amidstCloud Mar 25 '18 at 20:09
  • Ok so you want with #txtId, let me change my code and give you in a bit. – Kumar Mar 25 '18 at 20:20
  • Here you go the below code will disable and enable text in the same row as checkbox with txtxId var j$ = jQuery.noConflict(); j$(document).ready(function() { j$('[id$=chkbx]').click(function() { console.log( ); if( this.checked == false ) { j$(this).closest('tr').find('input[id$=txtId]')[0].removeAttribute("disabled"); } else { j$(this).closest('tr').find('input[id$=txtId]')[0].setAttribute("disabled", "disabled"); } }); }); – Kumar Mar 26 '18 at 1:08
  • @Kumar Thanks for your help. However, this does not work either. Kindly see modified code in my post. – curdual Mar 26 '18 at 4:44
  • @curdual Do you need to have <center><table>.....</table></center> tags inside <apex:column> ? If you see my code, i don't have them. If you just use <apex:column headerValue="Checkbox"><apex:inputcheckbox id="chkbx" value="{!b.Checkbox__c}" /></apex:column> and same for text, then my solution will work. – Kumar Mar 26 '18 at 5:03

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.