Tips for deactivating a text field once a selection drop-down option has been chosen

I have been searching for a while on the internet but I couldn't find what I was looking for.

How can I disable a text field when a select drop down is selected with a value (not empty)?

It would also be nice to toggle it. When there is no option selected in the select drop down (no value), the user should be able to type in the text field.

I came across some similar code, but it checks if the value is equal to "/\Custom\b/gi". I want it to check if something is selected or not.

$('#Select_Font, #Enter_Text').attr('disabled', 'disabled');
$('.dropdownstyle').change(function () {

    var present = $(this).val().match(/\Custom\b/gi) == null ? true : false;
        if(present){
            $('#Select_Font, #Enter_Text').attr('disabled', 'disabled');
        }
        else{
            $('#Select_Font, #Enter_Text').removeAttr('disabled');
        }
});

Source: How to enable or disable drop-down or text-box on selection other drop-down?

Is that possible? Thanks in advance.

Edit:

HTML

<div class='row'>
    <div class="large-6 columns">
        <label for="group">Group

            <select name="selectGroup" id="selectGroup">
                <option value="">Choose a group</option>

                <?php
                while ($row = $result->fetch_assoc()) {
                    echo '<option value="' . $row['group'] . '">' . $row['group'] . '</option>';
                }
                ?>

            </select>
        </label>
    </div>

    <div class="large-6 columns">
        <label for="group">Or make a new group
            <input type="text" name="makeGroup" id="makeGroup"/>
        </label>
    </div>
</div>

Answer №1

$(document).ready(function() {
    $('#selectGroup').change(function () {
        var selectedValueLength = $(this).val().length;
        $('#Select_Font, #Enter_Text').prop('disabled', selectedValueLength);
    });
});

View the demo on FIDDLE

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Picture in a clear background without any alteration

Is there a way to create a background-color with opacity inside an image without affecting the image itself? The issue lies in the fact that the transparent background-color makes everything underneath it, including text and the image, transparent. Below ...

Using PHP and jQuery to generate push notifications can result in issues with server performance

To simulate push notifications using PHP, I have implemented the following method: An AJAX call is made to a server-side script using jQuery. The script includes a for loop with a sleep function after each iteration to introduce delay. If a certain condi ...

Issue in Ionic 2: typescript: The identifier 'EventStaffLogService' could not be located

I encountered an error after updating the app scripts. Although I've installed the latest version, I am not familiar with typescript. The code used to function properly before I executed the update. cli $ ionic serve Running 'serve:before' ...

Tips for implementing two Secondary Actions in React Material UI, with one positioned on the left corner and the other on the right, while ensuring that the behavior of the

Is there a way to display two secondary actions on either end of a list item without triggering additional onclick events? The placement can be adjusted by overriding the CSS properties right and left. https://i.stack.imgur.com/rhr7N.gif The issue arises ...

Initiate conversation with QnA Maker Bot Framework recognizer (Node JS)

Is it possible to pass a "Welcome Message" at the start of a chat with a bot using QnA Maker recognizer in a way that the model does not interpret it as a message to be sent to the model? I am currently working with the latest Node.js API. var intents = n ...

The problem of JSON data being displayed instead of redirecting is persistent

Here's a unique AJAX Login solution that I developed. $(function() { $('#loginform').submit(function(){ var uname = $('#username').val(); var password = $('#password').val(); $("#loading").show(); ...

The positioning problem arising from using a Vuetify select dropdown within a datatable

Vuetify datatable is being used with 20 columns, functioning properly. To view all the columns, horizontal scrolling is available. Filters are needed for each column in the header, achieved using v-slot:header. An issue arises when clicking on the select ...

The function toDataURL() in Canvas is storing images in low resolution

I created a unique polygonal background generator using HTML5 canvas which can be found at the following link: http://codepen.io/rfalor/pen/LhinJ Here is the important part of the code: var canvas = document.getElementById("canvas"); var ctx = c ...

Omit a certain td element from the querySelectorAll results

Greetings! I am currently working with an HTML table and I need to figure out how to exclude a specific td element from it, but I'm not sure how to go about it. Here's the HTML code: <table id="datatable-responsive" c ...

Experience the power of Vue Google Chart - Geochart where the chart refreshes seamlessly with data updates, although the legend seems to disappear

I have integrated vue google charts into my nuxt project. Whenever I select a different date, the data gets updated and the computed method in my geochart component correctly reads the new data. However, the legend or color bar at the bottom does not funct ...

Guide to storing a variable value when a user clicks on the client-side in a Grid View:

How can I store data in a variable on client click within a grid view? I have a Stored Procedure that returns Service Id based on the Department code provided. We are binding these details to a Grid View. How can we bind the Service Id to a variable that ...

What is the best way to utilize Ajax and Jquery in order to retrieve data from a PHP database and dynamically update elements with the fetched information?

I am currently enhancing a website to simplify the process for employees when editing products. At present, in order to change prices, someone has to log in to the database and manually alter them, followed by making adjustments to the HTML of the website ...

Capybara's attach_file function is not properly activating the React onChange handler in Firefox

Currently, I am conducting tests on the file upload feature of a React-built page. The page includes a hidden file input field with an onChange event listener attached to it. Upon selecting a file, the onChange event is triggered and the file is processed ...

Distinguishing Between URLs for Google Maps JavaScript API

Can you explain the discrepancy between two Google API URLs? One is https://maps.google.com/maps/api/js?key={api_key}, which is currently not functioning and returns an error when attempting to use it on a map to display coordinates. The other is https:/ ...

Integrating TypeScript into an established create-react-app project

Struggling to integrate TypeScript into an existing create-react-app? I've always added it at the beginning of a project using create-react-app my-app --scripts-version=react-scripts-ts, but that's not working this time. The only "solution" I co ...

Can TypeScript and JavaScript be integrated into a single React application?

I recently developed an app using JS react, and now I have a TSX file that I want to incorporate into my project. How should I proceed? Can I import the TSX file and interact with it within a JSX file, or do I need to convert my entire app to TSX for eve ...

I'm having an issue with my Bootstrap tabs - they seem to be unresponsive when clicked

I've been working on a Bootstrap website and have run into some issues that I can't seem to resolve. One problem I encountered was with a set of tabs that were supposed to be interactive, but for some reason, they weren't working as expected ...

Tips for choosing an item in a multi-select dropdown using Selenium WebDriver

Currently delving into Selenium WebDriver while utilizing Java.. I am curious about how to select values in a Multi-select box where the options are already pre-selected. If I want to choose two or more additional options, how can I go about it? The HTML ...

What is the reason for the malfunctioning of this button upon clicking?

Attempting to customize my personal website by making the sidebar width change when the sidebar button is clicked. I'm puzzled as to why it's not working as intended. I prefer to figure it out independently but any helpful tips would be appreciat ...

Jquery If Block Troubleshooting: Identifying and Resolving

const response = fetch("./viewforms", { method: "GET", async: false }).then(response => response.text()); response.then(data => { const myObject = JSON.parse(data); alert(myObject.attributes[0]["type"]); $("#updateDiv1").htm ...