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

首先，您需要向HTML输入添加属性disabled，然后检查复选框是否选中，然后启用输入。以下是使用jQuery完成的：

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

您的HTML输入具有添加的属性disabled：

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

Answer 2

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

Answer 3

以下是使用JQuery的方法（请记住在复选框中添加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 4

如果你想要简单的javascript，你可以将disable属性添加到你的输入元素然后javascript就像：

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

禁用输入，直到选中复选框

5 个答案: