In Bootstrap, how can I prevent form fields from being responsive when the screen resolution is in the col-xs or col-sm range?

Question

In Bootstrap, how can I prevent form fields from being responsive when the screen resolution is in the col-xs or col-sm range?

I'm struggling to grasp this concept. In my form, there are roughly 20 input values that display when utilizing col-md or col-lg, but for smaller screens (col-xs and col-sm), I want to use a dropdown instead.

The issue arises when I attempt to hide the fields with hidden-sm or hidden-xs; they remain in the form and still get processed upon submission, resulting in the value being passed twice - once as a radio button and once as a dropdown selection.

I suspect many others are facing similar challenges. What is the appropriate method to completely disable input fields in Bootstrap (not just hide them) for smaller screen sizes? The inputs currently look 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">
...

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

It seems like I've just found the solution to my question all by myself! Hooray! Feel free to point out any errors in my approach or suggest improvements, but here's what is currently 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
      }
  });

Answer 2

It seems like I've just found the solution to my question all by myself! Hooray! Feel free to point out any errors in my approach or suggest improvements, but here's what is currently 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
      }
  });

In Bootstrap, how can I prevent form fields from being responsive when the screen resolution is in the col-xs or col-sm range?

Answer №1

Similar questions

Populate DataTable header labels with data from a JSON array

Dynamically update arguments using ajax

Transform your sidebar menu into a collapsible dropdown using Bootstrap

Integrate a text input field with a dropdown menu to create a single component that allows users to either manually input a value or choose

Tips on clearing notices and warnings at the bottom of a PHP questionnaire

What is the best method for sending a variable using AJAX with a POST request?

Execute a database query to search for patterns using Regular Expressions within the

Is there a way to increase the total of each row by two when a button is clicked?

What could be causing the Ajax code to not activate when clicking or loading?

Secure User Authentication using HTML and JavaScript Box

Node.js and Mongoose not functioning properly in collaboration

Is there a way to position two Grid elements to the left and one to the right in Material UI, especially if the first Grid element has a specified width

Running JavaScript code within views

Utilizing a server for seamless communication between a mobile device and a website

Efficient ways to enhance CSS animations (including scaling, rotating, and blurring)

Regular expression for extracting all JavaScript class names and storing them in an array

What is the best method for assigning a default value to the file input tag in HTML?

Is there a way to bypass validation upon button click in ASP.NET Core?

Attempting to implement window resizing in a jQuery Cycle slideshow

Arrange one array while ensuring the order of the other two arrays remains consistent