Enable single checkbox

Question

What I am trying to achieve: Once I click a document (i.e., Document 1), I want the box to the right of that document to be enabled so the user can check it. However, it is currently set so if the user clicks document 1, all the boxes become enabled.

I was just using document 1 as an example, but I want this for each document link. Can anyone help?

I did some research, but could not find any fix for something this specific.

My current code:

<!DOCTYPE html>
<html>

<head>
<style>
table, th, td
{

border:1px solid black;
border-collapse:collapse;
}
</style>

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function() {
        $("input").removeAttr("disabled");
    });
});
</script>

</head>

<body>

<form method="post" action="mailto:@null">
<table style="width:500px">
<tr>

    <td><a href="https://null" target="_d1">Document 1</a>
    <td><input type="checkbox" name="name1" value="D1" disabled></td>
    </tr>
<tr>
    <td><a href="https://null" target="_d2">Document 2</a></td>
    <td><input type="checkbox" name="name1" value="D2" disabled></td>
    </tr>
<tr>
    <td><a href="https://null" target="_d3">Document 3</a></td>
    <td><input type="checkbox" name="name1" value="D3" disabled></td>
    </tr>
<tr>
    <td><a href="https://null" target="_d4">Document 4</a></td>
    <td><input type="checkbox" name="name1" value="D4" disabled></td>
    </tr>
<tr>
    <td><a href="https://null" target="_d5">Document 5</a></td>
    <td><input type="checkbox" name="name1" value="D5" disabled></td>
    </tr>
<tr>
    <td><a href="https://null" target="_d6">Document 6</a></td>
    <td><input type="checkbox" name="policyAcknowledgement" value="D6" disabled></td>
    </tr>
</table>

<input type="submit">
<input type="reset">
</form>

</script>
</body>
</html>

Side note, you seem to have a stray `` at the end of your page. — j08691, Apr 26 '14 at 22:22
possible duplicate of [JQuery - checkbox enable/disable](http://stackoverflow.com/questions/2330209/jquery-checkbox-enable-disable) — pennstatephil, Apr 26 '14 at 22:23

score 1 · Accepted Answer · answered Apr 26 '14 at 22:21

1

Change your jQuery to:

$("a").click(function (e) {
    e.preventDefault();
    $(this).parent().next().find('input').removeAttr("disabled");
});

jsFiddle example

answered Apr 26 '14 at 22:21

j08691

204,283
31
260
272

Is there a reason you chose to use `removeAttr('disabled')` rather than `prop('disabled', false)`? Genuinely just curious, rather than critical of your chosen approach. – David Thomas Apr 26 '14 at 22:58
@DavidThomas - Great question. No. I didn't give it any thought actually. Normally I'll do `prop('disabled', false)` but I just re-used the OP's original code on that one. – j08691 Apr 26 '14 at 23:01
@j08691 Actually, the document links are not being followed now, however it still enables to box. How do I make those links followable? Like if I click on Document 1, it will take me to that link and still enable the box... Thanks. – Slightly Not Average Apr 27 '14 at 00:36
@j08691 to clarify: " Like if I click on Document 1, it will take me to that link and still enable the box... " is what I want. – Slightly Not Average Apr 27 '14 at 00:45
Remove `e.preventDefault();` – j08691 Apr 27 '14 at 00:45

Enable single checkbox

1 Answers1