Question

我有一个使用css构建的自定义拨动开关。.我试图在单击拨动开关后禁用某些输入标签。因此，每当我三次单击该开关时，它就会停止工作，我似乎无法理解为什么。

这是代码。

$('input[name="switch"]').change(function() {
      if (this.checked) {
        $('input[name="tin"], label[for="tin"]').prop('disabled', true);
        $('input[name="switch"]').prop('name', "tin");
        $('#tinSwitchText').hide().html("(This will attract an added cost)").fadeIn(1500);
      } else {
        $('input[name="tin"], label[for="tin"]').prop('disabled', false);
        $('input[name="switch"]').prop('name', "switch");
        $('#tinSwitchText').html('')
      }
  });

<!-- Include jQuery. -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div class="form-group d-flex " >
  <span class="w-15 d-flex justify-content-end">
    <input value="Get TIN" type="checkbox" id="id-name--1" name="switch" class="switch-input">
    <label for="id-name--1" class="switch-label"></label>
  </span>
  <span class="w-85 d-flex justify-content-start">
    <label for="" >I dont have a TIN, I want to get one <br>
      <small><i id="tinSwitchText"></i></small> 
    </label>
  </span>
 </div>

Answer 1

在阅读完注释和诸如此类的内容之后，我做出了这样的假设：您想要拥有什么？

我必须说，您在这里要实现的目标还不清楚，即为什么您将ID为tinSwitchText的元素的内部HTML值设置为空，而只是将其重置？当然，仅显示/隐藏它会更有效。

// Some function that will run when the input is checked.
const whenChecked = (input) => {
  $('input[name="tin"], label[for="tin"]').prop('disabled', input.checked);
  $(input).prop('name', "tin");
  $('#tinSwitchText').fadeIn(1500);
};


// Some function that will run when the input is unchecked.
const whenUchecked = (input) => {
  $('input[name="tin"], label[for="tin"]').prop('disabled', input.checked);
  $(input).prop('name', "switch");
  $('#tinSwitchText').hide();
};


// Some function to handle the input state change.
const onChangeHandler = (input) => input.checked ? whenChecked(input) : whenUchecked(input);


// Wait for the DOM to load.
$(document).ready(() => {
  const input = document.querySelector("input[name=switch]");
  input.onchange = () => onChangeHandler(input);
});

<!-- Include jQuery. -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div class="form-group d-flex " >
  <span class="w-15 d-flex justify-content-end">
    <input value="Get TIN" type="checkbox" id="id-name--1" name="switch" class="switch-input">
    <label for="id-name--1" class="switch-label"></label>
  </span>
  
  <!-- 
     - I've set the content of $('#tinSwitchText') to the default value below, 
     - the reason being because in the example code you provided, there wasn't much
     - going on? It would either be hidden, or visible, and essentially in this 
     - solution, it maintains the same functionality, but by all means, feel free to 
     - change it as you like.
    -->
  <span class="w-85 d-flex justify-content-start">
    <label for="">I dont have a TIN, I want to get one <br>
      <small><i style="display:none" id="tinSwitchText">(This will attract an added cost)</i></small> 
    </label>
  </span>
  
 </div>

Answer 2

这样做的话，内行就是$('input[name="switch"]').prop('name', "tin");，您可以在重命名复选框后将其自身禁用。这是详细的过程：

this.checked为true，input name="switch"被重命名为name="tin"
this.checked为假，input name="switch"不再存在
this.checked为true，被重命名为name="tin"的输入被禁用

实际上，您也无需重命名输入即可检测服务器数据中的更改。由于复选框的工作方式，如果选中该字段，则该字段将出现在输入中；如果未选中，则该字段将丢失。应该足以检测您的价值。

只需删除$('input[name="switch"]').prop('name', "tin");和$('input[name="switch"]').prop('name', "switch");行，然后在检测服务器端进行调整即可。

自定义拨动开关在三次拨动后停止工作

2 个答案: