2017-02-17 79 views
0

我有一個按鈕,它看起來像一個在OFF按鈕 Button looks as啓用和使用jquery上點擊按鈕禁用輸入字段(laravel5.3)

按鈕默認但是當用戶點擊它應該得到關閉,並且點擊時,應該禁止輸入字段 我的按鈕是

按鈕

<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

請幫助其不爲我工作

+0

您要禁用輸入字段,對嗎? –

+0

是禁用,如果再次點擊它也可以啓用 –

+0

但我申請Fullname Class到DIV –

回答

2

您的第一個代碼缺少一些東西。像類FullName

控制您可以通過使用$('#on_off').is(':checked')或在這種情況下$(this).is(':checked')因爲我們使用$('#on_off')點擊事件得到複選框的值。

既然你沒有一個「全名」級隨時隨地在你的榜樣,我添加emailIdinput

$('#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>

+0

親愛的,它不爲我工作:( –

+0

如果您閱讀我的文章,你會注意到,我說你的代碼的一些部分是缺少。'$('。FullName')'不存在於你的代碼的例子。請更新你的問題或者更清楚一下什麼不工作 –

+0

親愛的我添加了我的輸入中的全名班請查看我的問題 –

0

請試試這個代碼。

這是你更新後的代碼:

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

希望,這可能會幫助你。

0

使用.attr('disabled',true).removeAttr('disabled')而不是.prop('disabled', true);如果不工作。

0

這是最容易得到的。

創建一個複選框。在複選框的單擊事件中,將其狀態作爲布爾值傳遞給按鈕禁用的值。

雖然我會建議使用現成的切換按鈕。 Link是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 />