How to disable textarea and hyperlink - html

Question

I have a table where the user can add rows to it but each row is numbered. Now the user enters a number in a textbox for the number of rows he/she wants to add before they actually start adding rows. Below is the code where if the number of rows that has been added is over the number entered by the user, then it stops adding the rows.
if (qnum > <?php echo (int)#$_POST['textQuestion']; ?>) {
return;
}
Example: if user entered in the number 5 in a textbox, then the user can only add 5 rows, if the user tries to add another row, then no row is added because user can't add more than 5 rows.
What my question is that if the user has already reach the max number of rows they have added, then I want it to disable a textarea (user wont be able to click in the textarea and I want to give it the correct colour so that you can tell the textarea is disabled). I also want to disable a hyperlink so that user cannot click on the hyperlink (again suitable color change so user can tell hyperlink is disabled) Does anyone know how to do this?
Below is code for hyperling 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 code showing example of 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 = "";
// Note, this is just so it's declared...
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 table row is added to:
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="qid">Question No</th>
</tr>
</thead>
<tbody></tbody>
</table>
look at this jsfiddle for example here, you can write a question on top using the textarea and when you have done that then click on the button to add it in a new row. It is the top textarea I want to disable only if the number of rows has met its limit.

Answer 1

Are you adding rows via JavaScript/Ajax or on page load?
If the former (which I'm guessing your first code example illustrates), use a JavaScript counter to represent the number of rows, and when they trigger the add row function (which you write), check that number first; alert and disabled accordingly:
jQuery allows you to disable form elements, and just replace the link with the link text (ie. minus the tag), and modify it's color, either with a $(ele).css() call, or by wrapping it in a span tag.
If the latter, you can just write the textarea via PHP with the disabled="disabled" property added to the opening tag. The link: use the same method as above (wrapping it in a span tag, rather than an a tag).
// To disable
$('.someElement').attr('disabled', 'disabled');
// To enable
$('.someElement').removeAttr('disabled');
Obviously, you need to include the jQuery framework. I usually use Google's: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.