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>
Was it helpful?

Solution

Change your jQuery to:

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

jsFiddle example

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top