Question

我有这种工作：

基本上，我希望有6个复选框和6个输入，当您单击复选框时，它将启用输入以允许用户输入数据。当您取消选中该复选框时，它将禁用输入字段。此外，我只想要选择3，其余的将被禁用。

<div class="span5 lengthcontainer">
                    <label class="control-label">Lengths:</label>
                    <div class="row day-selection">

                        <input name="" type="checkbox" value="" class="LCheckbox" >
                        <label>:05&nbsp;&nbsp;&nbsp;</label>
                        <input name="textinput" type="text" class="input-mini-length LInput" disabled>

                        <input name="" type="checkbox" value="" class="LCheckbox">
                        <label>:10&nbsp;&nbsp;&nbsp;</label>
                        <input id="10Input" name="textinput" type="text" class="input-mini-length LInput" disabled>

                        <input name="" type="checkbox" value="" class="LCheckbox" >
                        <label>:15&nbsp;&nbsp;&nbsp;</label>
                        <input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled>
                    </div>
                    <div class="row day-selection">
                                            <input name="" type="checkbox" value="" class="LCheckbox" >
                        <label>:30&nbsp;&nbsp;&nbsp;</label>
                        <input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled>

                        <input name="" type="checkbox" value="" class="LCheckbox" >
                        <label>:60&nbsp;&nbsp;&nbsp;</label>
                        <input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled>

                        <input name="" type="checkbox" value="" class="LCheckbox">
                        <label>:60+</label>
                        <input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled>
                    </div>
                </div>

 //Enables only 3 at a time for Unit Lengths section in the advertiser wizard
$(document).ready(function () { 
$('.LCheckbox').click(function(){
if($('input.LCheckbox').filter(':checked').length == 3)
    $('input.LCheckbox:not(:checked)').attr('disabled', 'disabled');
else
    $('input.LCheckbox').removeAttr('disabled');
 });
 });

$(document).ready(function () {
$('.LCheckbox').change(function(){
if ($('input.LCheckbox').is(':checked') == true){
  $(this).nextAll(".LInput:first").prop('disabled', false);
    } else {
    $(this).nextAll(".LInput:first").val("").prop('disabled', true);

    }
 });
});

Answer 1

您可以将所有内容减少到：

$('.LCheckbox').click(function () {
    $(this).next().next().prop('disabled', !this.checked)
    $('.LCheckbox').not(':checked').prop('disabled', $('.LCheckbox:checked').length == 3);
});

<强> jsFiddle example

Answer 2

我发布的更有效的版本：将您的javascript更改为：

$(document).ready(function () { 
$('.LCheckbox').click(function(){
      $('.LCheckbox').not(':checked').prop('disabled', $('.LCheckbox:checked').length == 3);
    var isChecked = this.checked;
    $(this).nextAll(".LInput:first").prop('disabled', !isChecked)
    if ( ! isChecked ) {
       $(this).nextAll(".LInput:first").val("");    
    }

 });
 });

这是一个工作http://jsfiddle.net/SwdFg/

的小提琴

JQuery：想一次只选择3个复选框，我希望它们也启用/禁用输入框

2 个答案: