what is the correct way in bootstrap to disable responsive form fields if the resolution is col-xs or col-sm?

Question

I can't seem to wrap my head around this. I have a form field with about 20 input values that show when I use col-md or col-lg, but for smaller resolutions (col-xs and col-sm) I'd like to use a dropdown instead.

Now, when I hide them simply with hidden-sm or hidden-xs, they're still in the form and they still get processed on submit, which means the value is getting passed through twice, once as a radio and once as a dropdown.

I imagine more people are having these issues than just me. What's the correct way to completely disable input fields in Bootstrap (not just hide them) for smaller screen resolutions? The inputs are like this:

<input type="radio" name="category_id" value="1" id="cat1">
<input type="radio" name="category_id" value="2" id="cat2">
<input type="radio" name="category_id" value="3" id="cat3">
...

Answer 1

I think I just answered my own question. Yaaay! Please correct me if I'm doing something wrong or if it can be improved, but here's what seems to be working for me:

 $(window).resize(function() {
      if ($(window).width() < 992) {
         $( "input[name$='category_id'" ).prop( "disabled", true ); //Disable
      }
         else {
         $( "input[name$='category_id'" ).prop( "disabled", false ); //Enable
      }
  });