Jquery 通过单击每个框来选择要更新的文本框，用1个滑块更新6个文本框

我正在尝试创建一个包含6个文本输入的表单，其中它们的值由滑块更新

我没有问题，但这样做，我需要使每个框是积极的，只是当它被点击停用其他的，并保持其价值观

我一直在尝试使用此功能：

$(document).ready(function() { 

var slider = document.getElementById('slider');
var box = document.getElementById("box");
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
var box4 = document.getElementById("box4");
var box5 = document.getElementById("box5");    

    slider.onchange = function(){
    box.value = '1 = ' + slider.value;
}

$('#box1').click(function(){
  $(this).data('clicked', true);
});

if($('#box1').data('clicked')) {
    slider.onchange = function(){
    box1.value = '2 = ' + slider.value;
}
} else {
    box.value;
}

});

有什么建议吗

非常感谢

试试看

html

---

JSFIDLE

@SalvoNostrato很乐意帮忙，如果可以的话。非常感谢。我想知道如何在点击时将css切换添加到它，并在另一个按钮被点击时将其删除？@SalvoNostrato不确定“添加css切换”是什么意思。请澄清？单击的

类

应仅存在于单击的

元素上。可以使用
向样式表添加适当的
css
。单击的{/*样式用于“单击的”*/}
？对不起，我的问题解释得很糟糕，这就是我的意思。-谢谢，我不知道如何加载第一个框的页面。
 <input type="text" id="box" data-clicked="1" value="1 = 0.00 " readonly><br>
 <input type="text" id="box1" data-clicked="2" value="2 = 0.00 +" readonly><br>
 <input type="text" id="box2" data-clicked="3" value="3 = 0.00 +" readonly><br>
 <input type="text" id="box3" data-clicked="4" value="4 = 0.00 +" readonly><br>
 <input type="text" id="box4" data-clicked="5" value="5 = 0.00 +" readonly><br>
 <input type="text" id="box5" data-clicked="6" value="6 = 0.00 +" readonly><br>

$(document).ready(function() {           
  var slider = $("#slider"); 
  var boxes = $("[data-clicked]");     
  $(boxes).on("click", function(e) {
    $(boxes).removeClass("clicked");
    $(e.target).addClass("clicked");  
  });        
  $(slider).on("change", $(boxes), function(e) {         
    $(".clicked")
    .val( $(".clicked").data("clicked")+ " = " + $(slider).val() );
  });
});