'How check condition of checkbox when uncheck/check with id of HTML

I'm using css and javascript to check condition of value of partner Code is null and 01

  1. If user checks checkbox is PARTNER, value of partnerName '01 - Elite' and value of partnerCode is '01' will send when submit
  2. If user unchecks checkbox is PARTNER, value of partnerName is 'NULL' and value of partnerCode is 'NULL' will send when submit

This is my code:

<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>

UPDATED:

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

But when I uncheck checkbox is PARTNER, value of partnerCode is 01 still sending when submit.
So how to fix the problem? thank a lot

javascripthtmljquerycss


Solution 1:[1]

set $("#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>

Solution 2:[2]

I believe you are missing the ability to toggle the value of partnerCode. Your updated code would only set the value of parnetCode to null and that's it.

Below is the code that would switch the values for 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");
});

Working example - https://jsfiddle.net/ma4orbnw/1/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohammad Ali Rony
Solution 2 Kennyb

Related Questions