CODEWITHSUNDEEP
htmlcheckboxonchangechecked
D.Jones
D.Jones

Reputation: 25

Disable button until checkbox ticked

Apologies if this has already been asked, i have found it difficult to use the answers I have found to use in my code.

Basically, I have a "receive" button, that when the user clicks, will receive an email. But, I want a tick box checked in order for the button to become clickable. I have a code that kind of works, but when the page first loads, the "Receive" button is already clickable. However, when I click the tick box then unclick it, it disables the button.

<td>
    <input type="checkbox"  id="tick" onchange="document.getElementById('terms').disabled = !this.checked;" />
    <td>
    <p> I agree to the <a href="terms.html" target="_blank">Terms & Conditions</a></p>
    </td>
</td>
</tr>
<td class="label1"></td>
<td align="right">
    <button type="submit" class="btn btn1" name="terms" id="terms">Receive</i></button>
</td>

Upvotes: 0

Views: 6096

Answers (5)

Upvesh Kumar
Upvesh Kumar

Reputation: 11

please add attrbute disabled to the button

I agree to the Terms & Conditions

Receive

Upvotes: 0

Therichpost
Therichpost

Reputation: 1815

Please check the answers: In simple HTML just Add "disabled" Attribute to button.

With jQuery : 

    $('#terms').attr('disabled',true);

With Css

Upvotes: 0

Surya Raj M
Surya Raj M

Reputation: 1128

Adding "disabled" attribute to the button is a better solution.

The disabled attribute is a boolean attribute.

When present, it specifies that the button should be disabled.

A disabled button is unusable and un-clickable.

Upvotes: 0

user6747379
user6747379

Reputation:

Just add disabled attribute on button

<button type="submit" class="btn btn1" name="terms" disabled id="terms">Receive</i></button>

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281686

Add the attribute disabled to the button initially 

 <td>
                                <input type="checkbox"  id="tick" onchange="document.getElementById('terms').disabled = !this.checked;" />
            <td>
            <p> I agree to the <a href="terms.html" target="_blank">Terms & Conditions</a></p>
            </td>
                            </td>
                          </tr>
                            <td class="label1"></td>
                            <td align="right">
                                <button type="submit" class="btn btn1" name="terms" id="terms" disabled>Receive</i></button>
                            </td>

Upvotes: 4

Related Questions