取消選中/選中 ID 為 HTML 時如何檢查復選框的條件

Question

我正在使用 css 和 javascript 檢查合作伙伴代碼的價值條件是 null 和 01

1. 如果用戶選中復選框為 PARTNER，partnerName 的值為 '01 - Elite' 且 partnerCode 的值為 '01' 將在提交時發送
2. 如果用戶取消選中復選框是 PARTNER，則 partnerName 的值為 'NULL' 並且 partnerCode 的值為 'NULL' 將在提交時發送

這是我的代碼：

<tr>
    <th scope="row">Partner</th>
    <td colspan="0" style="margin-top: 4px;">
        <input id="parnerNameCheck" name="parnerNameCheck" type="checkbox"/><span>PARTNER</span>
    </td>
    <td>
        <select id="partnerName" name="partnerName" disabled>
            <option value="" selected>Choose One</option>
            <option>01 - Elite</option>
        </select>
    </td>
    <td>
        <input id="partnerCode" name="partnerCode" type="hidden" value="01" />
    </td>
</tr>           
    
<script>
  $('#parnerNameCheck').click(function() {
    console.log('parnerNameCheck  checked:' + $("#parnerNameCheck").is(":checked"));
    $('#partnerName').prop("disabled", !$(this).prop("checked"));
    $('#partnerCode').prop("disabled", !$(this).prop("checked"));       
  });
</script>

更新：

$('#parnerNameCheck').click(function() {
    console.log('parnerNameCheck  checked:' + $("#parnerNameCheck").is(":checked"));
    $('#partnerName').prop("disabled", !$(this).prop("checked"));
    $('#partnerCode').prop("disabled", !$(this).prop("checked")); 
    $("#partnerCode").val('');
});

但是當我取消選中復選框是 PARTNER 時，partnerCode 的值是 01，提交時仍在發送。
那么如何解決這個問題呢？ 非常感謝

Answer 1

設置$("#partnerCode").val('');

 $('#parnerNameCheck').click(function() { console.log('parnerNameCheck checked:' + $("#parnerNameCheck").is(":checked")); $('#partnerName').prop("disabled", .$(this);prop("checked")). $('#partnerCode'),prop("disabled". ;$(this).prop("checked")); $("#partnerCode");val(''); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <tr> <th scope="row">Partner</th> <td colspan="0" style="margin-top: 4px;"> <input id="parnerNameCheck" name="parnerNameCheck" type="checkbox"/><span>PARTNER</span> </td> <td> <select id="partnerName" name="partnerName" disabled> <option value="" selected>Choose One</option> <option>01 - Elite</option> </select> </td> <td> <input id="partnerCode" name="partnerCode" type="hidden" value="01" /> </td> </tr>

Answer 2

我相信您缺少切換 partnerCode 值的功能。 您更新后的代碼只會將 pa.netCode 的值設置為 null，僅此而已。

下面是將切換 partnerCode 值的代碼：

$('#parnerNameCheck').click(function() {
  console.log('parnerNameCheck: ' + $("#partnerCode").val());
  $('#partnerName').prop("disabled", !$(this).prop("checked"));
  $('#partnerCode').prop("disabled", !$(this).prop("checked")); 
  
  // Declare variables 
  var partnerCode = $("#partnerCode");
  var partnerCodeVal = partnerCode.val();
  
  // Apply condition to $("#partnerCode").val() 
  // that will switch between values
  partnerCode.val(partnerCodeVal === "01" ? "" : "01");
});

工作示例 - https://jsfiddle.net/ma4orbnw/1/