Question

见附图。我默认禁用字段块，只有选中复选框才会启用它。例如，如果选中product1复选框，则将启用product1框字段。

最好的做法是什么，复选框上的data-id然后检查字段？坚持这个。

@foreach(get_products_by_parent_name("PC") as $product_id => $product_name)
                 <div class="col-md-4">
                    <div class="form-group">
                          <h4><label class="p_name"><input type="checkbox" value="{{ $product_id }}" name="scope[{{ $product_id }}][pid]"> {{ $product_name}} </label></h4>
                          <label>Quantity</label>
                          <input type="number" min="1" class="form-control" 
                          name="scope[{{ $product_id }}][quantity]">
                          <label>Description</label>
                          <textarea class="form-control" name="scope[{{ $product_id }}][description]" style="resize: none;"></textarea>
                    </div>
                  </div>
               @endforeach

Answer 1

它是jQuery中的一个单行程序：

$("input[type='checkbox']").change(function(){
    $(this).parents("h4").siblings("input, textarea").prop("disabled", !$(this).prop("checked"));
});

在checkbox更改事件中，您将DOM导航到h4父级，然后导航到input或textarea个兄弟姐妹，并为他们设置{{ 1}} prop与disabled状态相反。

Answer 2

HTML：

@foreach(get_products_by_parent_name("PC") as $product_id => $product_name)
             <div class="col-md-4 parent_{{$product_id}}">
                <div class="form-group">
                      <h4><label class="p_name"><input type="checkbox" value="{{ $product_id }}" class="toggleTextBox" data-parent="parent_{{$product_id}}" name="scope[{{ $product_id }}][pid]"> {{ $product_name}} </label></h4>
                      <label>Quantity</label>
                      <input type="number" min="1" class="form-control" 
                      name="scope[{{ $product_id }}][quantity]">
                      <label>Description</label>
                      <textarea class="form-control" name="scope[{{ $product_id }}][description]" style="resize: none;"></textarea>
                </div>
              </div>
           @endforeach

JQuery的：

$('.toggleTextBox').on('click',function(e){
  $('.' + $(this).attr('data-parent')).find('input,textarea').removeClass('disabled');
});

CSS：

.disabled { pointer-events:none; opacity: 0.5; }

启用文本字段阻止

2 个答案: