3

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">
...
user1996496
  • 972
  • 2
  • 10
  • 24
  • 1
    Interesting question. Honestly I think it's not possible with bare bootstrap. I think you will need to resort to javascript dom manipulation. – wvdz Nov 01 '15 at 08:57
  • I think part of the answer could be in this question: http://stackoverflow.com/questions/5963099/how-do-i-disable-form-fields-using-css I just need to figure out how to convert it to this case. – user1996496 Nov 01 '15 at 12:04

1 Answers1

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
      }
  });
user1996496
  • 972
  • 2
  • 10
  • 24
  • Yeah, unfortunately it looks like this is the only way to do it, since you cannot use css to disable elements. – wvdz Nov 01 '15 at 12:20