使用jquery启用和禁用单击按钮上的输入字段（laravel5.3）

Question

我有一个按钮，看起来像 on off Button

按钮默认为 ，但是当用户点击它时应该关闭，点击它时应禁用输入字段  我的按钮是

按钮

<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 : '' }}" required />
 </div>

我的 Jquery 代码为

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

我从Disable Input field

获得了上述帮助

帮助请不要为我工作

Answer 1

你的第一个代码遗漏了一些东西。与类FullName

的控件一样

您可以使用$('#on_off').is(':checked')或本案例$(this).is(':checked')获取复选框的值，因为我们正在使用$('#on_off')点击事件。

由于您的示例中的任何位置都没有“全名”类，我将email添加到Id

的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>

Answer 2

请尝试此代码。

这是您更新的代码：

<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>

希望，这可能会对你有帮助。

Answer 3

如果不能正常工作，请使用.attr('disabled',true)或.removeAttr('disabled')代替.prop('disabled', true);。

Answer 4

这是最容易获得的。

创建一个复选框。在复选框的单击事件中，将其状态作为布尔值传递给按钮禁用值。

虽然我建议使用现成的切换按钮。链接是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 />