CODEWITHSUNDEEP
javascriptcheckboxhideodoo
sss
sss

Reputation: 107

Hide field based on checkbox using javascript in odoo 12

I have two fields, field1 is a checkbox and field2 is a normal text field. I want to hide a field2 if a field1 is not checked and if

field1 is checked then show field2. For that, I am creating the following code: 


odoo.define('survey_inherit.FormView', function (require) {
"use strict";

var FormView = require('web.FormView');
var core = require('web.core');
var QWeb = core.qweb;

var FormView = FormView.extend({
   _checkField: function(){

        var $checkbox = $('.custom-control-input').val();

        if ($checkbox.is(':checked')) {

        $('.o_form_label').show();
        $('.mandatory_msg_class').show();
        }else{

          $('.mandatory_msg_class').hide();
        }//close else
   },
});//close FormController

return FormView; 
});

But field2 is not hidden if field1 is not checked and also field2 is not shown if field1 is checked.

Update

My requirement is that I have one form which contains a one2many field with widget many2many_tags and other fields. After clicking on tags of many2many_tags, I want to display the complete records in other fields. I am able to get complete records after a click on tags and also these records are able to put in other fields. After using attrs and opening form view for creating records field2 will never display. But open form view in edit mode after creating a record and click on many2many_tags field2 is not displayed because of attrs. Removing attrs and opening form view for creating records field will display(but don't want to display because field1 is not checked) and open form view in edit mode after creating a record, click on many2many_tags work fine as expected. Attrs condition: attrs="{'invisible':[('constr_mandatory','!=',True)]}" constr_ mandatory: checkbox field
This is the reason I am not using attrs and trying to achieve with the help of javascript. I hope the provided information is understood. Also, I have updated the question added screenshots for better understanding.

Using attrs:enter image description here

Using attrs click on many2many_tags enter image description here

Without using attrs: enter image description here

Upvotes: 0

Views: 2074

Answers (3)

Kenly
Kenly

Reputation: 26678

You can add a new widget and override the click method.

I did this with a BooleanToggle field.

var basic_fields = require('web.basic_fields');

var Toggle = basic_fields.BooleanToggle.extend({

    _onClick: function (event) {
        var self = this;
        this._super(event);
        var node = event.view.$('.custom-control-input');

        if(this.value) {
            node.show();
        } else {
            node.hide();
        }
    },
});

fieldRegistry.add('toggle', Toggle);

You need to add the widget attribute: 

field name="field1" widget="toggle"/>

Edit
You need to hide the fields after the form loaded, I suggest to you to override the autofocus function of the FormRenderer. 

var FormRenderer = require('web.FormRenderer');
FormRenderer.include({
    autofocus: function () {
        var self = this;
        // In my test I used fields values available in "self.state.data"
        if(self.state.model === 'sale.order' && field_value){
            var nodes = window.$('.custom-control-input');
            nodes.hide();
        }
        return this._super();
    },
});

Upvotes: 3

Joe
Joe

Reputation: 586

Try jQuery

$(function() {
  $("#selpoNO").click(function() {
    if ($(this).is(":checked")) {
      $(".if_pucEntry").show();
    } else {
      $(".if_pucEntry").hide();
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- checkbox -->
<label class="led-label"><input type="checkbox" class="led-btn" name="selpoNO" id="selpoNO" style="width: auto !important;"><strong>Checkbox</strong></label>

<!-- text box -->

<input type="text" class="form-control if_pucEntry" id="" name="" style="display: none;">

Upvotes: 0

thanhdx
thanhdx

Reputation: 618

var $checkbox = $('.custom-control-input').val();

This line set $checkbox to the checkbox's value. May be you just want the checkbox element itself:

var $checkbox = $('.custom-control-input');

Upvotes: 0

Related Questions