Ways to deactivate text box and link

In my table, users can add rows with each row being numbered. Before adding any rows, the user must enter a number in a textbox indicating how many rows they want to add. Once that number is reached, no more rows can be added.

if (qnum >= <?php echo (int)@$_POST['textQuestion']; ?>) {
    return;
}

For example, if a user enters '5' in the textbox, only 5 rows can be added. Any attempts to add more will be blocked as the limit has been reached.

My question is, once the user reaches the maximum number of rows, I want to disable a textarea (making it unclickable and changing its color to show it's disabled). I also want to disable a hyperlink so it cannot be clicked on (again changing its color to indicate it's inactive). Does anyone know how to achieve this?

Below is the code for the hyperlink and the textarea:

<table id="question">
<tr>
    <th colspan="2">
        Question Number <span id="questionNum">1</span>
    </th>
</tr>
<tr>
    <td rowspan="3">Question:</td> 
    <td rowspan="3">
        <textarea id="questionTextArea" rows="5" cols="40" name="questionText"></textarea>
        <span href="#" class="link">[Question link]</span>
    </td>
</tr>
</table>

Jquery function showing how a table row is added:

function insertQuestion(form) {   

    var questionarea=(form.questionText.length)
            ? form.questionText[0]
            : form.questionText;

        var context = $('#optionAndAnswer');
    var currenttotal = context.find('.answerBtnsOn').length;        

    alertErrors = "";
    
    if (questionarea.value == ""){

    if (qnum >= <?php echo (int)@$_POST['textQuestion']; ?>) {
    return;
}

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $qid = $("<td class='qid'>" + qnum + "</td>");

$tr.append($qid);
 $tbody.append($tr);    

}

Html table where the new row is added:

<table id="qandatbl" align="center>
<thead>
<tr>
    <th class="qid">Question No</th>
</tr>
</thead>
<tbody></tbody>
</table>

View this demonstration here. You can write a question in the top textarea, then click the button to add it as a new row. My goal is to disable the top textarea once the row limit is reached.

Answer №1

Are you dynamically adding rows using JavaScript/AJAX, or are they loaded when the page loads?

If it's the former situation (as shown in your initial code snippet), consider using a JavaScript counter to keep track of the number of rows. When the user triggers the function to add a row, check this counter first. You can then display an alert and disable certain elements based on the count:

With jQuery, you have the option to disable form elements. Simply swap out a link with plain text by removing the <a> tag and adjusting its styling using CSS methods like $(ele).css() or enclosing it in a <span> tag.

If the rows are added upon page load using PHP, you can directly write the textarea with the disabled attribute already set within the opening <textarea> tag. For links, follow the same approach mentioned earlier by wrapping them in a <span> instead of an anchor tag.


// To disable
$('.someElement').attr('disabled', 'disabled');

// To enable
$('.someElement').removeAttr('disabled');

Make sure to include the jQuery library for these features. I recommend using Google's hosted version: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.

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

Executing functions in TypeScript

I am facing an issue while trying to call a function through the click event in my template. The error message I receive is "get is not a function". Can someone help me identify where the problem lies? This is my template: <button class="btn btn-prima ...

Incorporating a Bootstrap table within another table and adjusting the table height

I am facing a minor issue on my website. I am utilizing bootstrap 4 and within the table box, I have nested another table as shown in the image below. How can I adjust the height of the inner table to match the height of the box (td)? https://i.sstatic.ne ...

Tips for properly positioning and rotating text in CSS and HTML!

My goal is to place a rotated headline next to some text, but I'm facing challenges with positioning when the page is resized. While absolute positioning works easily in a static scenario (left picture), it fails when the page size changes (right pict ...

App.jsx line 11 is throwing an error due to an undefined property 'TodoComponent'

While attempting to style a ReactJS component, I encountered an error in my browser's development console: App.jsx:11 Uncaught TypeError: Cannot read property 'TodoComponent' of undefined at App.render (App.jsx:11) I have tried imp ...

I'm confused why this code is functioning in JSFiddle but not on my HTML webpage

For the first time, I am encountering this issue. I am currently attempting to integrate this code into my application http://jsfiddle.net/TC6Gr/119/ My attempts include: Pasting all the jsfiddle code in a new page without my code, but it doesn't w ...

I am experiencing an issue with using double quotation marks in VS Code

Whenever I press the double quote symbol like this "", the cursor automatically moves to the end. While this may be natural, I would prefer the cursor to move inside the double quotes automatically when pressing them. Additionally, it's a bi ...

What is the method to trigger the alt + f4 combination in AngularJS when a button is clicked?

Is there a way to manually close the current tab in AngularJS by simulating Alt+F4 key press? $scope.cancel = function (event) { var keycode = event.keycode; }; <button class="btn btn-outline-primary" ng-click="cancel($event);">OK</button&g ...

Triggering an animation on one element by hovering over a different element

I'm trying to create a cool effect where the train ticket rotates when I hover over a leaf. Although I can get the train ticket to rotate when I hover over it directly, it doesn't seem to work when I hover over the leaf. Can someone help me spot ...

How can I dynamically update a div without refreshing the page by using an onclick event on a

When working on my project, I found helpful insights from this Stack Overflow thread. The structure of template-comparison.php involves fetching code from header.php to ensure the page displays properly. However, the actual "fetch code" process remains un ...

How to vertically center align h1 using Bootstrap

<body> <nav class="navbar navbar-expand-md bg-dark navbar-dark py-3"> <div class="container"> <div class="navbar-brand mx-auto"><h2 style="color: white;">Name< ...

How can we enhance the integration of HTML and PHP for a smoother workflow?

Are there alternative solutions, aside from using a template engine like Smarty, for managing large code like this? <table class="table table-striped dataTable table-bordered"> <thead> <tr> <?php $o ...

Designing a fresh look for the developer portal on Azure API Management Services

Is there a way to customize the color of the navbar links in the fresh developer portal for different layouts? I have attempted using the designer tool provided by the portal, but it hasn't yielded any results. I also tried cloning the git repository ...

What is the best way to implement a slide-down animation on a stateless component in React JS using either ReactCSStransitionGroup or ReactTransition

I am looking to create an animation for a stateless component that starts off with display:none, and then becomes visible when the parent component's state changes. I want it to slide down like a dropdown menu effect. I am new to animations and have b ...

Searching for a solution on how to effectively utilize ng-repeat to filter data based on a specific field when passing an array, while considering that the field may or may not be included in the array. Working within Angular

ng-repeat="equipment in equipments | filter: {guidEquiment: ['cb8b22e1-43f0-4dc9-b2dc-34847731e2d1','cb8b22e1-43f0-4dc9-b2dc-34847731e2d1','cb8b22e1-43f0-4dc9-b2dc-34847731e2d1',....N]}" When the variable equipment has a guid ...

What steps can I take to ensure my radio button functions according to my specified conditions?

Check out this code: <div className="form-group row mb-3"> <div className="col-sm-2" style={{ fontSize: "1rem" }}> Test:{" "} </div> <div className="col-sm-4"> <div ...

Slice the towering text in half lengthwise

Ensure that the last line of visible text fits within a 20px padding, or else it should be completely cut off. The challenge lies in the varying text lengths of h3 each time. It's difficult to predict how much needs to be trimmed. Currently, the tex ...

Animating jQuery Counter with Changing Background Color

I've implemented a Counter that counts from 0 to a specified number, and it seems to be working perfectly. However, I want to add an animation where the background color of a div height animates upwards corresponding to the percentage of the counter. ...

Could someone explain why Bootstrap columns are positioned in the same row but stacked on top of each other?

In the HTML structure I have provided below, you can see that there is a nested row inside another row, and within that inner row, there are two more columns (trying to split col-9 into more columns). However, the issue is that instead of appearing next t ...

What's the best way to ensure a paragraph element larger than its container is centered using bootstrap?

Need help with centering a paragraph element (email) that is larger than its container: https://i.sstatic.net/f3E55.png Here's the code I have so far: <div class="col-lg-2 col-lg-offset-1 text-center"> <a href="mailto:{{ site.email }}" ...

Using JQuery to iterate through every unique div id in the HTML document

i am attempting to utilize jquery to iterate through each div tag that has an id of "rate". The goal is for jquery to execute a function on the individual divs. Here is my code snippet: information.html <html> <input class="rate" type="hidden ...