Vue UI Components Documentation

Sets or gets the delay of the fade animation when the CheckBox is going to be checked.

<template>
  <JqxCheckBox ref="myCheckBox"
    :animationShowDelay="300">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the animationShowDelay property.

let animationShowDelay = this.$refs.myCheckBox.animationShowDelay;

Sets or gets the delay of the fade animation when the CheckBox is going to be unchecked.

<template>
  <JqxCheckBox ref="myCheckBox"
    :animationHideDelay="500" :checked="true">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the animationHideDelay property.

let animationHideDelay = this.$refs.myCheckBox.animationHideDelay;

Sets or gets the checkbox's size.

<template>
  <JqxCheckBox ref="myCheckBox"
    :boxSize="'15px'">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the boxSize property.

let boxSize = this.$refs.myCheckBox.boxSize;

Sets or gets the check state.

'true'

'false'

'null'

<template>
  <JqxCheckBox ref="myCheckBox"
    :checked="true">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the checked property.

let checked = this.$refs.myCheckBox.checked;

Sets or gets whether the CheckBox is disabled.

<template>
  <JqxCheckBox ref="myCheckBox"
    :disabled="true">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the disabled property.

let disabled = this.$refs.myCheckBox.disabled;

Sets or gets whether the clicks on the container are handled as clicks on the check box.

<template>
  <JqxCheckBox ref="myCheckBox"
    :enableContainerClick="false">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the enableContainerClick property.

let enableContainerClick = this.$refs.myCheckBox.enableContainerClick;

Sets or gets the group name. When this property is set, the checkboxes in the same group behave as radio buttons.

<template>
  <div>
    <JqxCheckBox ref="checkBox1"
      :groupName="'panel'">
      Entertainment
    </JqxCheckBox>
    <JqxCheckBox ref="checkBox2"
      :groupName="'panel'">
      Computers
    </JqxCheckBox>
  </div>
</template>
 
<script>
import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
export default {
  components: {
    JqxCheckBox
  }
};
</script>

Sets or gets the jqxCheckBox's height.

<template>
  <JqxCheckBox ref="myCheckBox"
    :height="100">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the height property.

let height = this.$refs.myCheckBox.height;

Sets or gets whether the checkbox has 3 states - checked, unchecked and indeterminate.

<template>
  <JqxCheckBox ref="myCheckBox"
    :hasThreeStates="true">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the hasThreeStates property.

let hasThreeStates = this.$refs.myCheckBox.hasThreeStates;

Sets or gets whether the checkbox is locked. In this mode the user is not allowed to check/uncheck the checkbox.

<template>
  <JqxCheckBox ref="myCheckBox"
    :locked="true">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the locked property.

let locked = this.$refs.myCheckBox.locked;

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxCheckBox ref="myCheckBox"
    :rtl="true">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the rtl property.

let rtl = this.$refs.myCheckBox.rtl;

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxCheckBox ref="myCheckBox"
    :theme="'material'">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the theme property.

let theme = this.$refs.myCheckBox.theme;

Sets or gets the jqxCheckBox's width.

<template>
  <JqxCheckBox ref="myCheckBox"
    :width="300">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the width property.

let width = this.$refs.myCheckBox.width;

This event is triggered when the checkbox is checked.

Code examples

Bind to the checked event of jqxCheckBox.

<template>
  <JqxCheckBox ref="myCheckBox" @checked="onChecked($event)"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    methods: {
      onChecked: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when the checkbox's state changes from one state to another.

Code examples

Bind to the change event of jqxCheckBox.

<template>
  <JqxCheckBox ref="myCheckBox" @change="onChange($event)"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the checkbox's checked property is going to be null.

Code examples

Bind to the indeterminate event of jqxCheckBox.

<template>
  <JqxCheckBox ref="myCheckBox" @indeterminate="onIndeterminate($event)"
    :hasThreeStates="true"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    methods: {
      onIndeterminate: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the checkbox is unchecked.

Code examples

Bind to the unchecked event of jqxCheckBox.

<template>
  <JqxCheckBox ref="myCheckBox" @unchecked="onUnchecked($event)"
    :checked="true"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    methods: {
      onUnchecked: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Checks the checkbox.

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.check();
    }
  }
</script>

Disables the checkbox.

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.disable();
    }
  }
</script>

Destroys the widget.

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.destroy();
    }
  }
</script>

Enables the checkbox.

<template>
  <JqxCheckBox ref="myCheckBox"
    :disabled="true"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.enable();
    }
  }
</script>

Focuses the widget.

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.focus();
    }
  }
</script>

Sets the indeterminate state(checked property value is going to be null after calling this method).

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.indeterminate();
    }
  }
</script>

Renders the widget.

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.render();
    }
  }
</script>

Toggles the check state. This method is automatically called when the user clicks the checkbox.

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.toggle();
    }
  }
</script>

Unchecks the checkbox.

<template>
  <JqxCheckBox ref="myCheckBox"
  :checked="true"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.uncheck();
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      const value = this.$refs.myCheckBox.val();
    }
  }
</script>