单选按钮仅适用于标签点击

Question

目前，点击我的单选按钮的标签可以切换＆＃34;已选中＆＃34;属性并触发click事件的其余部分。但是，如果我直接单击输入本身，则会触发click事件，但不会检查该属性。这是我的HTML

＆＃13;

＆＃13;

  $( "table.stripped tr:nth-child(2) td:nth-child(2)" ).val();

＆＃13;

$('.sociographic').on('click', function(e) {
  e.preventDefault()
  e.stopPropagation()

  var currentLayer = $(this).children('.form-check-label').children('input').attr('id')
  console.log(currentLayer)
  $('.sociographic').children('.form-check-label').children('input').prop('checked', false)
  $(this).children('.form-check-label').children('input').prop('checked', true)
  var currentID = "#" + currentLayer
  $(currentID).prop('checked', true)
  console.log(currentID)
  // ...rest of click event
});

＆＃13;

＆＃13;

＆＃13;

同样，一切正常，点击事件肯定会触发。从字面上看，唯一不同的是道具（＆＃39;检查＆＃39;，假）代码无法做任何事情。当我调试.log $（这）我甚至得到相同的输入。事实上，标签延伸到单选按钮上，我尝试将z-index设置为10000000，以确保我始终点击标签。即使我保证点击标签，当我点击标签上的实际输入部分时，它也无法正常工作。

这是一张图片，可以更好地说明我的意思：

注意以下几点：1）标签在输入上延伸。 2）当我将$（＆＃39; #cancer＆＃39;）。prop（＆＃39; checked＆＃39;，true）输入控制台时，我可以手动设置单选按钮进行检查。这是我在点击事件中包含的确切代码，似乎没有做任何事情。 3）这是每个按钮的问题。

我不知道为什么这个看似简单的单选按钮拒绝以编程方式进行检查，我将不胜感激。提前谢谢！