Question

我的主要目标是在取消选中复选框时发布“0”。我遇到过一种技术，我需要放置一个与我的复选框同名的隐藏字段。选中复选框后，将禁用隐藏字段。它对我来说很奇怪，但是，代码似乎很长，我想找一个缩短它的方法。

HTML：

<div id="subscriptionForm">
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft1" id="checkLeft1" />
  <input type="hidden" value="0" name="checkLeft1" id="checkLeft1Hidden" />
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft2" id="checkLeft2"/>
  <input type="hidden" value="0" name="checkLeft2" id="checkLeft2Hidden" />

  <input type="checkbox" value="1" class="checkRight" name="checkRight1" id="checkRight1"/>
  <input type="hidden" value="0" name="checkRight1" id="checkRight1Hidden" />
  <input type="checkbox" value="1" class="checkRight" name="checkRight2" id="checkRight2"/>
  <input type="hidden" value="0" name="checkRight2" id="checkRigh21Hidden" />
</div>

脚本：

function disableHidden() {
  if ($("#checkLeft1").is(":checked")) {
    $("#check1Hidden").attr("disabled", true);
  }
  if ($("#checkLeft2").is(":checked")) {
    $("#check2Hidden").attr("disabled", true);
  }
  if ($("#checkRight1").is(":checked")) {
    $("#trAsiaEuropeHidden").attr("disabled", true);
  }
  if ($("#checkRight2").is(":checked")) {
    $("#trAsiaNamHidden").attr("disabled", true);
  }
}

我必须在左右两侧放置不同的类，以便遵循所需的布局。

你对此有什么建议吗？谢谢！

Answer 1

除非您的复选框/隐藏字段具有一致的命名模式，或者您的复选框后面的隐藏字段保证一致，否则您将无法以编程方式执行此操作。

您的复选框必须以这种方式命名吗？您是否会在复选框后立即放置隐藏字段？我问的原因是因为您在示例脚本中列出了trAsia ...

Answer 2

如果你只想＆＃34;禁用＆＃34;隐藏输入，如果选中它前面的复选框，那么你可以这样做：

   $('#subscriptionForm').find('[type="checkbox"]').change(function() {
        $(this).next('[type="hidden"]').attr('disabled', $(this).is(':checked'));
   }).change();

JSFiddle演示：https://jsfiddle.net/zka3m8a1/3/

Answer 3

你的意思是：https://jsfiddle.net/aonk3730/

$('input[type="checkbox"]').change(function(){
  if($(this).is(":checked")){
    $(this).next("input[type='hidden']").attr("disabled", true);
  }else{
    $(this).next("input[type='hidden']").attr("disabled", false);
  }
});

Answer 4

您代码中的所有内容都有点矫枉过正。根据接收数据的位置（如果是PHP），您应该能够将隐藏的字段移动到相关的复选框上方，然后完全删除Javascript。

<div id="subscriptionForm">
  <input type="hidden" value="0" name="checkLeft1" id="checkLeft1Hidden" />
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft1" id="checkLeft1" />
  <input type="hidden" value="0" name="checkLeft2" id="checkLeft2Hidden" />
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft2" id="checkLeft2"/>
  <input type="hidden" value="0" name="checkRight1" id="checkRight1Hidden" />
  <input type="checkbox" value="1" class="checkRight" name="checkRight1" id="checkRight1"/>
  <input type="hidden" value="0" name="checkRight2" id="checkRigh21Hidden" />
  <input type="checkbox" value="1" class="checkRight" name="checkRight2" id="checkRight2"/>
</div>

但是，如果你更喜欢一些Javascript和更干净的HTML，那么你可以插入一些隐藏的字段，例如：

function zeroOutUncheckedFields() {
  $('#subscriptionForm input[type="checkbox"]').each(function(){
    if (!$(this).is(':checked')) {
      $(this).after('<input type="hidden" name="' + $(this).attr('name') + '" value="0">')
    }
  });
}

您的HTML可以是：

<div id="subscriptionForm">
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft1" id="checkLeft1" />
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft2" id="checkLeft2"/>
  <input type="checkbox" value="1" class="checkRight" name="checkRight1" id="checkRight1"/>
  <input type="checkbox" value="1" class="checkRight" name="checkRight2" id="checkRight2"/>
</div>

Answer 5

这可能对您有所帮助

HTML

<div id="subscriptionForm">
  <input type="checkbox" class="checkLeft" name="checkLeft1" id="checkLeft1" />
  <input type="checkbox" class="checkLeft" name="checkLeft2" id="checkLeft2"/>
  <input type="checkbox" class="checkRight" name="checkRight1" id="checkRight1"/>
  <input type="checkbox" class="checkRight" name="checkRight2" id="checkRight2"/>
</div>

的jQuery

$("input:checkbox").on("change", function() {
  console.log($(this).is(":checked"));
});

Answer 6

$('input[type="checkbox"]').click(function(){
if($(this).is(':checked'))
$(this).next('input[type="hidden"]').attr('disabled','disabled')
else
$(this).next('input[type="hidden"]').removeAttr('disabled');
});

工作小提琴

https://jsfiddle.net/c8ue0d3d/6/

使用jQuery获取所有未选中复选框的ID

6 个答案: