Enable and Disable input fields on click button using jquery (laravel5.3)

Question

I have a button which looks like an on off Button

Button is by default on but when user will click it should get off and when it is clicked it should disable the input field my button is as

Button

<input type="checkbox" class="make-switch" id="on_off" name="double_optin" checked data-on-text="on" data-off-text="off">

Input field which i want to be disabled if above button clicks

<div class="col-md-4 FullName">
 <input type="text" class="form-control" name="email" value="{{ isset($student->email) ? $student->email : '' }}" required />
 </div>

My Jquery code is as

$('#on_off').click(function(){
    $('.FullName').prop('disabled', true);
});

I took above help from Disable Input field

Help Please its not working for me

You want to disable Input field , Right? – Ghanshyam Singh Feb 17 '17 at 07:14 — Ghanshyam Singh, Feb 17 '17 at 07:14
yes disable and also enable if its clicked again – Ramzan Mahmood Feb 17 '17 at 07:14 — Ramzan Mahmood, Feb 17 '17 at 07:14
But i applied Fullname Class To DIV – Ghanshyam Singh Feb 17 '17 at 07:16 — Ghanshyam Singh, Feb 17 '17 at 07:16
Bootstrap has readymade toggle button. – Hemal Feb 17 '17 at 07:51 — Hemal, Feb 17 '17 at 07:51

Carsten Løvbo Andersen · Answer 1 · 2017-02-17T08:01:04.713

2

First of your code is missing something. Like the control with class FullName

You can get the value of the checkbox by using $('#on_off').is(':checked') or in this case $(this).is(':checked') because we are using $('#on_off') click event.

Since you dont have a "Fullname" class anywhere in your example I added email to the Id field of the input

$('#on_off').click(function() {

  $('.FullName [name="email"]').attr('disabled', $(this).is(':checked') ? false : true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="make-switch" checked id="on_off" name="double_optin" data-on-text="on" data-off-text="off">

<div class="col-md-4 FullName">
  <input type="text" class="form-control" name="email" value="disable me by click on checkbox" required />
</div>

edited Feb 17 '17 at 08:01

answered Feb 17 '17 at 07:15

Carsten Løvbo Andersen

26,637
10
47
77

If you read my post, you will notice that i said there are some parts of your code that is missing. `$('.FullName')` dont exist in the example of your code. Please update your question or be a bit more clear about what dont work – Carsten Løvbo Andersen Feb 17 '17 at 07:25
dear i added Full name class in my input please review my question – Ramzan Mahmood Feb 17 '17 at 07:36
dear you removed checked class from button it will be checked by default and input should enable. – Ramzan Mahmood Feb 17 '17 at 07:47
You want the checkbox to be checked by default and the input shall be enable(writeable) by default? – Carsten Løvbo Andersen Feb 17 '17 at 07:48
try look at it now. – Carsten Løvbo Andersen Feb 17 '17 at 07:52
at 1st uncheck its remains enable please run code snippet – Ramzan Mahmood Feb 17 '17 at 07:55
Okay please clarify your question. checkbox checked = input enable? – Carsten Løvbo Andersen Feb 17 '17 at 07:56
check it now, if this is not what you want then you need to clarify what you want way more – Carsten Løvbo Andersen Feb 17 '17 at 08:01

score 0 · Answer 2 · answered Feb 17 '17 at 07:28

Please try this code.

Here is your updated code:

<input type="checkbox" class="make-switch" id="on_off" name="double_optin" checked data-on-text="on" data-off-text="off">
<div class="col-md-4 FullName">
 <input type="text" class="form-control" name="email" value="{{ isset($student->email) ? $student->email : '' }}" id= "email"required />
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#on_off').change(function() {
        //alert();
        if ($(this).prop('checked')) {
            $('.FullName input').prop('disabled', false);
        }
        else {
            $('.FullName input').prop('disabled', true);
        }
    });
});

</script>

Hope, this may help you.

score 0 · Answer 3 · answered Feb 17 '17 at 07:52

0

use .attr('disabled',true) or .removeAttr('disabled') instead of .prop('disabled', true); if not working.

answered Feb 17 '17 at 07:52

flo lab

19
2

score 0 · Answer 4 · answered Feb 17 '17 at 07:54

This is the easiest you can get.

Create a checkbox. In click event of checkbox, pass its state as a boolean to buttons disabled value.

Though I would suggest to use ready made toggle button. Link is here

$(document).ready(function(){
  $(":checkbox").change(function(){
    $(":button").prop("disabled",$(this).is(":checked"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=checkbox />
<input type=button value=Target />

Enable and Disable input fields on click button using jquery (laravel5.3)

4 Answers4