Display disabled (but still actionable trigger) product attribute button
I faced following issue:
Imagine an e-commerce site. On our PDP (product detailed page) user is able to make some key attribute selection, it will identify product price.
Let's speak on example.
User wants to buy smartphone Iphone X. He chose it and went to PDP. On PDP we provide an opportunity to reselect the variant by tweaking any storage (primary characteristic) and colour (secondary). User pressed on 64GB storage option and realised that the colour option (he had in mind) became disabled.
Apparently, all variants are always shown while the ones that are not immediately enabled can still be clicked with the effect that other characteristics are automatically adjusted.
So, we still want to enable the user to click on "disabled" characteristic and readjust primary attribute (storage) attribute another way back.
Challenge is:
We should be able to differentiate in UI characteristic which suppose to change the preselected characteristic. In Amazon's case, it's the dashed lines.
Are there any other solutions to display it, but show that it is still actionable trigger?
You can look how it's done on Amazon
This is part of our design. We need to find another way instead of dotted line for an "disabled" characteristic: