Combobox with Checkbox and Input Text options

Question

Good afternoon, you guys, I wonder if it is possible in a form to create a combobox with options to select in checkbox and text box to fill with a value. (As picture) and then I can send the selected item with the respective value. I would like some example if possible.

Thank you!

Answer 1

I particularly love the Vue.js.

With it it is possible to leave the dynamics of html rendering in real time. This example automates the content display process.

Now you just need to receive this data from an API without having to worry about changing the html document every time your database or API adds a new product.

var app = new Vue({
  el: '#check',
  data: {
    checks: [
        {label: 'APPLE' , values: ['IPHONE' , 'IPAD']  , check:false},
        {label: 'LG' , values:  ['TVs' , 'SMARTPHONES']  , check:false}
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="check">
    <div v-for="check in checks" >
        <label >{{check.label}}</label>
        <input type="checkbox" v-on:click="check.check = check.check == false ? true : false">
        <select  v-if="check.check"> 
            <option v-for="value in check.values "  v-bind:value="value" >{{value}}
        </select>
    </div>   
</div>

Answer 2

It is possible yes you can cause when a checkbox is selected to be activated the combobox. And when the combobox changes its value the same can be assigned to the checkbox, as follows:

var checkbox = document.querySelectorAll('input[type="checkbox"]');

for (var i = 0; i < checkbox.length; i++) {
  checkbox[i].addEventListener('change', function() {
    var input = this,
      select = this.parentElement.nextElementSibling;

    input.value = select.value;
    select.disabled = !this.checked;
    select.onchange = function() {
      input.value = this.value;
    }
  });
}

<form>
  <div>
    <label>
      <span>IPhone</span>
      <input type="checkbox">
    </label>
    <select disabled>
      <option value="1">Valor 1</option>
      <option value="2">Valor 2</option>
      <option value="3">Valor 3</option>
    </select>
  </div>
</form>