확인란을 선택하지 않을 때까지 입력을 사용하지 않음

Question

앞에 입력 한 확인란이있는 양식 입력이 있는데 확인란을 선택해야이 입력을 사용할 수 있습니다. 이 일을 어떻게 하죠?

<div class="form-group "> 
        <label class="control-label" for="date">Student</label> 
        <div class="input-group"> 
         <span class="input-group-addon"> 
         <input type="checkbox"> 
         </span> 
         <input id="prependedcheckbox" name="prependedcheckbox" class="form-control" 
         type="text" placeholder=""> 
        </div> 
        </div 

This 내가 이야기하고있는 비활성 상태의 예입니다

이

내 입력입니다.

Answer 1

은을 (받는 사람 ID를 추가해야합니다 체크 박스) :

$(function() { 
    $inp = $("#prependedcheckbox"); 
    $cb = $("#checkbox"); 
    $inp.prop('disabled', true); 

    $cb.on('change', function() { 
    if ($cb.is(':checked')) { 
     $inp.prop('disabled', false); 
    } else { 
     $inp.prop('disabled', true); 
    } 
    }); 

}); 

JSFiddle

당신이 간단한 자바 스크립트를 원하는 경우

Answer 2

먼저 disabled 속성을 HTML 입력에 추가 한 다음 확인란이 ()으로 설정되어 있는지 확인한 다음 입력을 사용 설정해야합니다. 추가 속성 disabled 가진

$(":checkbox").change(function() { 
    if ($(this).prop("checked")) $("#prependedcheckbox").prop("disabled", false); 
    else $("#prependedcheckbox").prop("disabled", true); 
} 

그리고 당신의 HTML 입력 : 다음은 jQuery를 사용하여 수행됩니다 당신이 JQuery와 함께 할 방법

<input id="prependedcheckbox" name="prependedcheckbox" class="form-control" 
    type="text" placeholder="" disabled> 

Answer 3

여기

$('input:checkbox').click(function() { 
    if ($('input:checkbox').is(":checked")) { 
     $("#prependedcheckbox").attr("disabled", "disabled") 
    } 
    else { 
     $("#prependedcheckbox").removeAttr("disabled") 
    } 
}); 

Answer 4

, 당신은 그것을 좋아 자바 스크립트 다음 입력 요소에 disabled 속성을 추가 할 수 있습니다

var checkbox = document.getElementById("radio"); 
 
function validator() { 
 
if (checkbox.checked == false) { 
 
document.getElementById('prependedcheckbox').disabled = true; 
 
} else { 
 
document.getElementById('prependedcheckbox').disabled = false; 
 
} 
 
} 
 

 
checkbox.addEventListener('click', validator);

<div class="form-group "> 
 
        <label class="control-label" for="date">Student</label> 
 
        <div class="input-group"> 
 
         <span class="input-group-addon"> 
 
         <input type="checkbox" id="radio"> 
 
         </span> 
 
         <input id="prependedcheckbox" name="prependedcheckbox" class="form-control" 
 
         type="text" placeholder="" disabled /> 
 
        </div> 
 
        </div>

Answer 5

이 내가 그것을 만든 방법이다.

<input type="checkbox" id="selected"> 

$('#selected').on('click', function(){ 
     if($(this).is(':checked')){ 
      $('#prependedcheckbox').attr('disabled', true); 
    }else{ 
      $('#prependedcheckbox').attr('disabled', false); 
    } 
}); 

This is a jsfiddle